{% extends "pos/base.html" %}
{% load static %}
{% block title %}{{ purchase_id|yesno:"Edit Purchase,New Purchase" }}{% endblock %}

{% block stylesheets %}
 
<style>
  /* Hide backend-only columns if needed */
  /*.col-gst, .col-ftax, .col-bonus, .col-batch, .col-expiry { display: none; }*/
  .col-gst, .col-ftax, .col-batch, .col-expiry { display: none; }
  /* Widen Name column */
  th.name-header, td.name-cell { width: 30%; }
  /* Compact inputs */
  #table_products input, #table_products select {
    width:100%; box-sizing:border-box; font-size:.85rem; padding:2px;
  }
  #table_products th, #table_products td {
    vertical-align:middle; font-size:.85rem;
  }
  .delete-row { font-size:1rem; line-height:1; }
  .fixed-footer { padding:6px; }
  /* Product Info Bar */
  #product-info-bar {
    background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%) !important;
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    font-size: .82rem;
    transition: opacity .2s;
  }
  #product-info-bar .pib-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px 10px;
    white-space: nowrap;
  }
  #product-info-bar .pib-chip b {
    color: #495057;
    font-weight: 600;
  }
  #product-info-bar .pib-chip .pib-val {
    color: #0d6efd;
    font-weight: 700;
  }
  #product-info-bar .pib-chip.pib-stock .pib-val { color: #198754; }
  #product-info-bar .pib-chip.pib-last  .pib-val { color: #dc3545; }
  #product-info-bar .pib-divider {
    width: 1px;
    height: 20px;
    background: #ced4da;
    margin: 0 4px;
  }
  /* Highlight the "Total" column in blue and bold */
  #table_products tbody td.total-cell {
  background-color:#cfe2ff;
  font-weight:600;
  color:#084298;
  font-size:.99rem;
  }

  /* force the input-group children to stay on one line */
  .input-group {
    flex-wrap: nowrap;
  }

  /* override select2's default full‐width so it flexibly fills the remaining space */
  .select2-container {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0; /* allow it to shrink if needed */
  }

  /* make the select2 "box" match Bootstrap's form-control height */
  .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
  }

  /* Scope: only inside this bar */
  .one-line-compact .compact-control {
    padding: .22rem .4rem;           /* tighter */
    line-height: 1.2;                 /* tighter */
    border-radius: .2rem;             /* subtle */
  }
  .one-line-compact .input-group.compact-group > .btn {
    padding: .22rem .5rem;            /* tighter button */
    border-radius: .2rem;
  }
  /* Select2: match compact height */
  .one-line-compact .select2-container .select2-selection--single {
    height: calc(1.2em + .44rem + 2px);
    padding: .12rem .35rem;
    line-height: 1.2;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .2rem;
  }
  .one-line-compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.2;
    padding-left: 0;
    font-size: .875rem;
  }
  .one-line-compact .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
  }

  /* ── Currency Selector ──────────────────────────────────────────────── */
  #currency-btn {
    font-size: .8rem;
    padding: .22rem .55rem;
    border-radius: .2rem;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
  }
  #currency-rate-input {
    width: 90px;
    font-size: .82rem;
    padding: .22rem .4rem;
    border-radius: .2rem;
    text-align: center;
    font-weight: 600;
  }
  #curr-base-hint {
    font-size: .78rem;
    color: #6c757d;
    margin-left: 8px;
    white-space: nowrap;
  }
  .curr-dropdown-item .curr-d-code   { font-weight:700; font-size:.9rem; }
  .curr-dropdown-item .curr-d-name   { font-size:.78rem; color:#6c757d; }
  .curr-dropdown-item .curr-d-rate   { font-size:.75rem; color:#198754; font-weight:600; }
  .curr-dropdown-item.is-base-item .curr-d-code { color:#0d6efd; }

  /* HIGH-CONTRAST READABILITY — sirf text dark/bold, border koi change nahi */
  .purchaseForm, .purchaseForm label,
  #table_products, #table_products th, #table_products td,
  .fixed-footer, .fixed-footer * {
    color: #000 !important;
  }
  .purchaseForm label,
  .row.one-line-compact label,
  .row label {
    font-weight: 700 !important;
    color: #000 !important;
  }
  .purchaseForm input.form-control,
  .purchaseForm select.form-select,
  .purchaseForm .form-control-sm,
  #table_products input,
  #table_products select {
    color: #000 !important;
    font-weight: 600 !important;
  }
  .purchaseForm input::placeholder { color: #495057 !important; opacity: 1; }
  #sub_total, #grand_total, #paid_amount, #balance_due,
  #prev_balance, #bill_amount, #combined_balance {
    color: #000 !important;
    font-weight: 800 !important;
    background: #fff !important;
  }

  /* Select2 ka khula dropdown — search box + results list: pure black, bold */
  .select2-dropdown .select2-search__field,
  .select2-container--open .select2-search__field,
  .select2-results__option {
    color: #000 !important;
    font-weight: 600 !important;
  }
  #table_products thead th {
    color: #000 !important;
    font-weight: 800 !important;
  }
  #table_products tbody td.total-cell {
    color: #002b6b !important;
    font-weight: 800 !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-selection__rendered {
    color: #000 !important;
    font-weight: 600 !important;
  }

  #payment-box {
    background: #f4f8ff;
    border: 1px solid #cfe0ff;
    border-radius: 6px;
    padding: 8px 10px;
  }
  /* BAAD */
  #payment-box label { color:#000 !important; font-weight:700 !important; }
/* BAAD */
  #balance_due.is-clear { color:#198754 !important; }
  #balance_due.is-due   { color:#c81e1e !important; }

  /* ── Number input: spinner arrows remove ─────────────────────────── */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] { -moz-appearance: textfield; }
  /* ── Code column: min-width for 12-digit barcode ─────────────────── */
  /* BAAD */
  /* ── Action column: sirf × button ki width ───────────────────────── */
  #table_products thead th:first-child,
  #table_products tbody td:first-child {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    text-align: center !important;
    white-space: nowrap;
  }

  /* ── Code column: saved space bhi milay, 12-digit barcode fit ho ─── */
  #table_products th.col-code,
  #table_products td.col-code { min-width: 145px; }
  #table_products td.col-code input { min-width: 138px; }

  /* ── Horizontal scroll when many columns visible ─────────────────── */
  #table_products.tbl-scroll-on th,
  #table_products.tbl-scroll-on td {
    min-width: 88px;
    white-space: nowrap;
  }
  #table_products.tbl-scroll-on th.name-header,
  #table_products.tbl-scroll-on td.name-cell { min-width: 180px; }
  #table_products.tbl-scroll-on th.col-extras,
  #table_products.tbl-scroll-on td.col-extras { min-width: 70px; }

  /* ── New columns ─────────────────────────────────────────────────── */
  #table_products .col-taxtype select { font-size:.78rem; padding:1px 2px; }
  #table_products .col-mrp    input  { font-size:.85rem; }
  #table_products .col-gstamt input,
  #table_products .col-ftaxamt input { font-size:.83rem; color:#155724 !important; font-weight:700 !important; }
  #table_products .col-netrate input { font-size:.83rem; color:#084298 !important; font-weight:800 !important; background:#eef4ff !important; }

  /* Purchase price border — price vs last purchase */
  .purchase-input.price-higher { border-color:#dc3545 !important; box-shadow:0 0 0 .15rem rgba(220,53,69,.25) !important; }
  .purchase-input.price-lower  { border-color:#198754 !important; box-shadow:0 0 0 .15rem rgba(25,135,84,.25)  !important; }

  /* Product search dropdown — wider */
  .select2-product-search + .select2-container .select2-dropdown,
  .select2-container.select2-product-search .select2-dropdown {
    min-width: 480px !important;
  }
  .prod-result-row { display:flex; gap:6px; align-items:center; padding:2px 0; font-size:.82rem; }
  .prod-result-row .pr-name  { font-weight:800; color:#000; flex:1 1 auto; }
  .prod-result-row .pr-pur   { font-weight:700; color:#0d47a1; min-width:60px; }
  .prod-result-row .pr-ret   { font-weight:700; color:#1b5e20; min-width:60px; }
  .prod-result-row .pr-comp  { color:#5d4037; font-size:.77rem; min-width:70px; }
  .prod-result-row .pr-stock { font-weight:700; color:#e65100; font-size:.78rem; min-width:40px; }
  .prod-result-row .pr-badge { font-size:.68rem; padding:1px 4px; border-radius:3px; }
</style>

{% endblock %}

{% block content %}
<form method="post" class="purchaseForm"
      action="{% if purchase_id %}{% url 'purchases:purchase_edit' purchase_id %}{% else %}{% url 'purchases:purchase_add' %}{% endif %}">
  {% csrf_token %}

<!-- HEADER FIELDS -->
  <!-- COMPACT ONE-LINE BAR (labels removed, placeholders used) -->
  <div class="row g-1 align-items-center mb-1 one-line-compact">

    <!-- Bill Type -->
    <div class="col-12 col-md-auto">
      <select id="ui_bill_type" class="form-select form-select-sm compact-control" data-placeholder="Bill Type">
        <option value="" selected disabled>Bill Type…</option>
        <option value="vendor_purchase">Vendor Purchase</option>
        <option value="vendor_return">Vendor Return</option>
        <option value="customer_purchase">Customer Purchase</option>
        <option value="customer_return">Customer Return</option>
      </select>
    </div>

    <!-- Party (Select2 + Add) -->
    <div class="col-12 col-md-5 col-lg-4">
      <div class="input-group input-group-sm compact-group">
        <select id="vendor_select" name="vendor" class="form-select select2 compact-control" data-placeholder="Party">
          <option value=""></option>
          <!-- …options… -->
        </select>
        <a href="{% url 'products:vendors_add' %}" target="_blank"
           class="btn btn-outline-primary btn-sm compact-btn d-inline-flex align-items-center justify-content-center"
           title="Add">
          <i class="fas fa-plus"></i>
        </a>

        <a href="{% url 'pos:config_list' %}?type=purchase" target="_blank"
           class="btn btn-sm btn-outline-secondary mr-2 d-inline-flex align-items-center justify-content-center"
           title="Settings">
          <i class="fas fa-cog"></i>
        </a>

        <a href="#"
           class="btn btn-sm btn-outline-secondary mr-2 d-inline-flex align-items-center justify-content-center"
           title="Youtube">
          <i class="fab fa-youtube text-danger fa-lg"></i>
        </a>

      </div>
    </div>

    <!-- Date -->
    <div class="col-6 col-md-auto">
      <input type="date" id="purchase_date" name="date"
             class="form-control form-control-sm compact-control" value="{{ today }}" placeholder="Date">
    </div>

    <!-- Challan # -->
    <div class="col-6 col-md-auto">
      <input type="text" id="challan" name="challan"
             class="form-control form-control-sm compact-control" placeholder="Challan #">
    </div>

    <!-- Remarks (flex fill) -->
    <div class="col-12 col-md col-lg">
      <input type="text" id="remarks" name="remarks"
             class="form-control form-control-sm compact-control" placeholder="Remarks">
    </div>

    <!-- ══════════════════════════════════════════════════════════
         CURRENCY SELECTOR — top-right of compact bar
         Only shown when 1+ currencies are configured
         ══════════════════════════════════════════════════════════ -->
    <div class="col-12 col-md-auto ms-auto d-flex align-items-center gap-1"
         id="currency-selector-wrap">

      <!-- Currency Dropdown button -->
      <div class="dropdown">
        <button class="btn btn-sm btn-outline-success dropdown-toggle"
                type="button"
                id="currency-btn"
                data-toggle="dropdown" 
                aria-expanded="false"
                title="Select Invoice Currency">
          <span id="curr-symbol">—</span>
          <span id="curr-code" class="ms-1">Loading…</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end shadow-sm" id="currencyDropdownMenu"
            style="min-width:210px; font-size:.85rem;">
          <li><span class="dropdown-item-text text-muted small">Loading currencies…</span></li>
        </ul>
      </div>

      <!-- Rate input — only visible when non-base currency is active -->
      <div id="currency-rate-wrap" style="display:none;">
        <input type="number"
               step="0.000001"
               min="0.000001"
               id="currency-rate-input"
               class="form-control form-control-sm"
               placeholder="Rate"
               title="Exchange Rate (1 foreign = ? base)">
      </div>

    </div>
    <!-- END CURRENCY SELECTOR -->

    <!-- Purchase Report shortcut -->
    <div class="col-12 col-md-auto">
      <a href="{% url 'purchases:purchases_list' %}" target="_blank"
         class="btn btn-sm btn-outline-primary compact-control d-inline-flex align-items-center gap-1"
         title="Open Purchase Report">
        <i class="fas fa-file-invoice"></i>
        <span class="d-none d-md-inline">Purchase Report</span>
      </a>
    </div>


  </div>

  <!-- Hidden fields for currency — submitted with form -->
  <input type="hidden" name="currency_id"   id="currency_id_hidden"   value="">
  <input type="hidden" name="currency_rate" id="currency_rate_hidden" value="1">


  <!-- PRODUCT INFO BAR -->
  <div id="product-info-bar" class="d-flex align-items-center justify-content-between px-3 py-1 mb-2" style="min-height:34px; display:none !important;">
    <!-- Left: product-specific info -->
    <div class="d-flex align-items-center gap-1 flex-wrap">
      <span class="pib-chip pib-stock">
        <b><i class="fas fa-boxes fa-sm me-1 text-muted"></i>Stock:</b>
        <span class="pib-val" id="pib-stock">—</span>
      </span>
      <span class="pib-chip">
        <b><i class="fas fa-layer-group fa-sm me-1 text-muted"></i>PPP:</b>
        <span class="pib-val" id="pib-ppp">—</span>
      </span>
      <span class="pib-chip pib-last">
        <b><i class="fas fa-tag fa-sm me-1 text-muted"></i>Last Pur:</b>
        <span class="pib-val" id="pib-last-purchase">—</span>
      </span>

      <div class="pib-divider"></div>

      <!-- Bill-level totals -->
      <span class="pib-chip">
        <b><i class="fas fa-cubes fa-sm me-1 text-muted"></i>Items:</b>
        <span class="pib-val" id="pib-total-items">0</span>
      </span>
      <!-- BAAD -->
      <span class="pib-chip">
        <b><i class="fas fa-hashtag fa-sm me-1 text-muted"></i>Total Qty:</b>
        <span class="pib-val" id="pib-total-qty">0</span>
      </span>
    </div>

    <!-- Right: Global Tax Type -->
    <div class="d-flex align-items-center gap-2 ms-3 flex-shrink-0">
      <label class="small mb-0 fw-bold text-muted" style="white-space:nowrap;">
        <i class="fas fa-receipt fa-sm me-1"></i>Tax Type:
      </label>
      <select id="global_tax_type" class="form-select form-select-sm" style="min-width:155px;font-size:.8rem;">
        <option value="0">Normal</option>
        <option value="1">Tax on MRP</option>
        <option value="2">Tax at Standard Rate</option>
      </select>
    </div>

  </div>

  <!-- PRODUCTS TABLE -->
  <div class="table-responsive mb-3">
    <table class="table table-sm table-bordered" id="table_products">
      <thead>
        <tr>
          <th>Action</th><th class="sno">S/No</th><th class="col-code">Code</th>
          <th class="name-header">Name</th><th class="col-speca">Specs</th><th>Qty</th>
          <th class="col-purchase-header">Purchase</th>
          <th class="col-margin">Margin</th>
          <th class="col-retail">Retail</th>
          <!-- BAAD -->
          <th class="col-gst">GST%</th><th class="col-gstamt">GST Amt</th>
          <th class="col-ftax">F-Tax%</th><th class="col-ftaxamt">F-Tax Amt</th>
          <th class="col-taxtype">Tax Type</th><th class="col-mrp">MRP</th>
          <th class="col-netrate">Net Rate</th>
          <th class="col-discamt">Disc Amt</th><th class="col-discpct">Disc %</th><th class="col-bonus">Bonus</th>
          <th class="col-batch">Batch</th><th class="col-expiry">Expiry</th><th>Total</th><th class="col-extras">Extras</th>
        </tr>
      </thead>
      <tbody>
        <!-- hidden template row -->
        <tr class="template-row d-none">
          <td><button type="button" class="btn btn-sm btn-danger delete-row">×</button></td>
          <td class="sno"></td>
          <td class="col-code"><input type="text" class="code-input form-control form-control-sm"></td>
          <td class="name-cell">
            <select class="name-select form-control form-control-sm">
              <option value=""></option>
            </select>
          </td>
          <td class="col-speca">
            <select class="speca-select form-control form-control-sm">
              <option value="" selected>Default Variant</option>
            </select>
          </td>

          <td><input type="number" step="any" class="qty-input form-control form-control-sm"></td>
          <td><input type="number" step="any" class="purchase-input form-control form-control-sm"></td>
          <td class="col-margin"><input type="number" step="any" class="margin-input form-control form-control-sm" placeholder="0"></td>
          <td class="col-retail"><input type="number" step="any" class="retail-input form-control form-control-sm"></td>
          <!-- BAAD -->
          <td class="col-gst"><input type="number" step="any" class="gst-input form-control form-control-sm"></td>
          <td class="col-gstamt"><input type="number" step="any" class="gstamt-input form-control form-control-sm" placeholder="0.00"></td>
          <td class="col-ftax"><input type="number" step="any" class="ftax-input form-control form-control-sm"></td>
          <td class="col-ftaxamt"><input type="number" step="any" class="ftaxamt-input form-control form-control-sm" placeholder="0.00"></td>
          <td class="col-taxtype">
            <select class="taxtype-select form-select form-select-sm">
              <option value="0">Normal</option>
              <option value="1">Tax on MRP</option>
              <option value="2">Standard Rate</option>
            </select>
          </td>
          <td class="col-mrp"><input type="number" step="any" class="mrp-input form-control form-control-sm" placeholder="0.00"></td>
          <td class="col-netrate"><input type="number" step="any" class="netrate-input form-control form-control-sm" placeholder="0.00"></td>
          <td class="col-discamt"><input type="number" step="any" class="discamt-input form-control form-control-sm"></td>
          <td class="col-discpct"><input type="number" step="any" class="discpct-input form-control form-control-sm"></td>
          <td class="col-bonus"><input type="number" step="any" class="bonus-input form-control form-control-sm"></td>
          <td class="col-batch"><input type="text" class="batch-input form-control form-control-sm"></td>
          <td class="col-expiry"><input type="text" class="expiry-input form-control form-control-sm" placeholder="MM/YY" maxlength="5" inputmode="numeric" autocomplete="off"></td>
          <td class="total-cell text-end">0.00</td>
          <td class="extras-cell col-extras">
            <div class="btn-group btn-group-sm" role="group">
              <button type="button" class="btn btn-outline-secondary btn-add-serials" title="Add Serials">
                <i class="fas fa-barcode"></i>
              </button>
            </div>
            <input type="hidden" class="serials-json" value="[]">
            <input type="hidden" class="is-serial-tracked" value="0">
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- FOOTER CALCULATIONS -->
<!-- ─── First row: adjustments ─── -->
<div class="row mb-2 g-2 align-items-end">
  <div class="col-md-2">
    <label>Sub Total</label>
    <input readonly id="sub_total" class="form-control form-control-sm">
  </div>
  <div class="col-md-1">
    <label>Disc %</label>
    <input id="flat_disc_pct" class="form-control form-control-sm" type="number" step="any">
  </div>
  <div class="col-md-1">
    <label>Disc Amt</label>
    <input id="flat_disc_amount" class="form-control form-control-sm" type="number" step="any">
  </div>
  <div class="col-md-2">
    <label>Other Expenses</label>
    <input id="other_charges" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>Builty Expenses</label>
    <input id="builty_expenses" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>Flat GST (%)</label>
    <input id="flat_gst" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>F-Tax (%)</label>
    <input id="f_tax" class="form-control form-control-sm">
  </div>
</div>

<!-- ── BUILTY PAYMENT PANEL ───────────────────────────────────────────── -->
<div id="builty-payment-panel" class="row mb-2 g-2" style="display:none;">
  <div class="col-12">
    <div class="px-3 py-2 rounded border"
         style="background:#f0f4ff; border-color:#1a3a5c !important;">
      <div class="d-flex align-items-center flex-wrap gap-3">

        <span class="fw-semibold text-primary" style="font-size:.82rem; white-space:nowrap;">
          🚚 Builty Payment
        </span>

        <div class="form-check form-switch mb-0">
          <input class="form-check-input" type="checkbox" role="switch" id="builty_is_paid">
          <label class="form-check-label" style="font-size:.82rem;" for="builty_is_paid">
            Mark as Paid
          </label>
        </div>

        <div id="builty-paid-details" class="d-flex align-items-center gap-3 flex-wrap"
             style="display:none !important;">
          <select id="builty_bank_id" class="form-select form-select-sm" style="min-width:160px;">
            {% for b in banks %}
              <option value="{{ b.t_id }}">{{ b.name }}</option>
            {% endfor %}
          </select>
        </div>

        <input id="builty_description" type="text" class="form-control form-control-sm"
               style="max-width:220px;" placeholder="e.g. ABC Transport Co.">

      </div>
    </div>
  </div>
</div>
<!-- ── /BUILTY PAYMENT PANEL ─────────────────────────────────────────── -->

<div id="payment-box" class="row mb-2 g-2 align-items-end">
  <div class="col-md-2">
    <label>Previous Balance</label>
    <input readonly id="prev_balance" class="form-control form-control-sm" value="0.00">
  </div>
  <div class="col-md-2">
    <label>Bill Amount</label>
    <input readonly id="bill_amount" class="form-control form-control-sm" value="0.00">
  </div>
  <div class="col-md-2">
    <label>Balance</label>
    <input readonly id="combined_balance" class="form-control form-control-sm" value="0.00">
  </div>
  <div class="col-md-2">
    <label>Paid Amount</label>
    <input id="paid_amount" class="form-control form-control-sm" type="number" step="any" min="0" placeholder="0.00">
  </div>
  <div class="col-md-2">
    <label>Paid Via</label>
    <select id="bank_select" class="form-select form-select-sm">
      {% for b in banks %}
        <option value="{{ b.t_id }}">{{ b.name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-2">
    <label>Remaining</label>
    <input readonly id="balance_due" class="form-control form-control-sm" value="0.00">
  </div>

  <div class="container-fluid d-flex justify-content-between align-items-center">
    <!-- Grand total hidden visually but kept for JS calculations -->
    <input id="grand_total" type="hidden">
    <span id="curr-base-hint" style="display:none;"></span>
    <button id="btnSave" class="btn btn-primary">Save Purchase</button>
  </div>
</div>

  <input type="hidden" name="purchase_items" id="purchase_items">
</form>


<!-- Serials Modal -->
<div class="modal fade" id="serialsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Attach Serials</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-2">
        <div class="d-flex justify-content-between small mb-2">
          <div>Required: <span id="sm-required">0</span></div>
          <div>Entered: <span id="sm-entered">0</span></div>
          <div>Remaining: <span id="sm-remaining">0</span></div>
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-2" id="sm-table">
            <thead><tr><th>#</th><th>Barcode / Serial</th><th>Description 1</th><th>Description 2</th><th>Action</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
        <button class="btn btn-outline-primary btn-sm" id="sm-add-row">Add Row</button>
      </div>
      <div class="modal-footer py-2">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-sm" id="sm-save" disabled>Attach Serials</button>
      </div>
    </div>
  </div>
</div>

<!-- Quick Product Create Modal -->
<div class="modal fade" id="quickProductModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;overflow:hidden;">

      <!-- ── Gradient Header ── -->
      <div class="modal-header py-3 px-4 border-0"
           style="background:linear-gradient(135deg,#0d6efd 0%,#0a4fc4 100%);">
        <div class="d-flex align-items-center gap-2">
          <div style="background:rgba(255,255,255,.18);border-radius:8px;padding:7px 10px;">
            <i class="fas fa-box-open text-white fa-lg"></i>
          </div>
          <div>
            <h6 class="modal-title text-white mb-0 fw-bold" style="font-size:.95rem;">
              . Create New Product
            </h6>
          </div>
        </div>
        <button type="button" class="btn-close btn-close-white ms-auto"
                data-bs-dismiss="modal"></button>
      </div>

      <!-- ── Body ── -->
      <div class="modal-body p-4" style="background:#f6f8fc;">
        <form id="quickProductForm" autocomplete="off">

          <!-- Section: Identity -->
          <div class="mb-3">
            <div class="d-flex align-items-center gap-2 mb-2">
              <span class="fw-semibold text-muted"
                    style="font-size:.73rem;text-transform:uppercase;letter-spacing:.7px;">
                Product Identity
              </span>
            </div>
            <div class="row g-2">
              <div class="col-md-4">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  Code
                </label>
                <input type="text" id="qp_code"
                       class="form-control form-control-sm"
                       placeholder="e.g. a-1042">
              </div>
              <div class="col-md-8">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  Name
                  <span class="text-danger">*</span>
                </label>
                <input type="text" id="qp_name"
                       class="form-control form-control-sm"
                       placeholder="Product Name">
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                 Company
                </label>
                <select id="qp_company" class="form-select form-select-sm">
                  <option value="">Select…</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  Category
                </label>
                <select id="qp_category" class="form-select form-select-sm">
                  <option value="">Select…</option>
                </select>
              </div>
            </div>
          </div>

          <hr class="my-3" style="border-color:#dde2ea;opacity:.6;">

          <!-- Section: Pricing -->
          <div class="mb-1">
            <div class="d-flex align-items-center gap-2 mb-2">
              <span style="width:3px;height:15px;background:#198754;border-radius:3px;
                           display:inline-block;"></span>
              <span class="fw-semibold text-muted"
                    style="font-size:.73rem;text-transform:uppercase;letter-spacing:.7px;">
                Pricing &amp; Pack
              </span>
            </div>
            <div class="row g-2">
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  Purchase
                </label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text px-2"
                        style="background:#d1e7dd;color:#0f5132;border-color:#a3cfbb;
                               font-size:.75rem;font-weight:700;">Rs</span>
                  <input type="number" step="any" id="qp_purchase"
                         class="form-control form-control-sm" placeholder="0.00">
                </div>
              </div>
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  Retail
                </label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text px-2"
                        style="background:#cff4fc;color:#055160;border-color:#9eeaf9;
                               font-size:.75rem;font-weight:700;">Rs</span>
                  <input type="number" step="any" id="qp_retail"
                         class="form-control form-control-sm" placeholder="0.00">
                </div>
              </div>
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  Wholesale
                </label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text px-2"
                        style="background:#fff3cd;color:#664d03;border-color:#ffe69c;
                               font-size:.75rem;font-weight:700;">Rs</span>
                  <input type="number" step="any" id="qp_wholesale"
                         class="form-control form-control-sm" placeholder="0.00">
                </div>
              </div>
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  Pcs/Pack
                </label>
                <input type="number" step="1" id="qp_ppp"
                       class="form-control form-control-sm" value="1" placeholder="1">
              </div>
            </div>
          </div>

        </form>
      </div>

      <!-- ── Footer ── -->
      <div class="modal-footer px-4 py-3 border-0"
           style="background:#eef1f7;">
        <button class="btn btn-sm btn-light border px-4" data-bs-dismiss="modal">
          <i class="fas fa-times me-1"></i>Cancel
        </button>
        <button class="btn btn-sm btn-primary px-4 fw-semibold" id="qp_save"
                style="letter-spacing:.2px;">
          <i class="fas fa-check-circle me-1"></i>Save Product
        </button>
      </div>

    </div>
  </div>
</div>


<!-- Purchase History Modal -->
<div class="modal fade" id="purchaseHistoryModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;overflow:hidden;">

      <!-- Header -->
      <div class="modal-header py-3 px-4 border-0"
           style="background:linear-gradient(135deg,#198754 0%,#0d6b3f 100%);">
        <div class="d-flex align-items-center gap-2">
          <div style="background:rgba(255,255,255,.18);border-radius:8px;padding:7px 10px;">
            <i class="fas fa-history text-white fa-lg"></i>
          </div>
          <div>
            <h6 class="modal-title text-white mb-0 fw-bold" style="font-size:.95rem;">
              Purchase History
              <span id="ph-product-label" class="ms-2 fw-normal opacity-75" style="font-size:.82rem;"></span>
            </h6>
            <small class="text-white-50" style="font-size:.72rem;">Alt+H to open for focused row</small>
          </div>
        </div>
        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal"></button>
      </div>

      <!-- Filter Bar -->
      <div class="px-4 py-2 border-bottom d-flex align-items-center gap-2 flex-wrap"
           style="background:#f0faf4;">
        <label class="small fw-semibold text-secondary mb-0">From:</label>
        <input type="date" id="ph-date-from"
               class="form-control form-control-sm"
               style="width:140px;">
        <label class="small fw-semibold text-secondary mb-0">To:</label>
        <input type="date" id="ph-date-to"
               class="form-control form-control-sm"
               style="width:140px;">
        <button class="btn btn-sm btn-success px-3" id="ph-search-btn">
          <i class="fas fa-search me-1"></i>Search
        </button>
        <span id="ph-loading" class="text-muted small ms-2" style="display:none;">
          <i class="fas fa-spinner fa-spin me-1"></i>Loading…
        </span>
        <span class="ms-auto small text-muted">
          Rows: <b id="ph-row-count">0</b>
        </span>
      </div>

      <!-- Table -->
      <div class="modal-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0" id="ph-table"
                 style="font-size:.82rem;">
            <thead style="background:#e9f5ee;position:sticky;top:0;z-index:1;">
              <tr>
                <th class="px-3">#</th>
                <th>Date</th>
                <th>Bill #</th>
                <th>Vendor</th>
                <th class="text-end">Qty</th>
                <th class="text-end">Bonus</th>
                <th class="text-end">Price</th>
                <th class="text-end">Disc</th>
                <th class="text-end">Total</th>
              </tr>
            </thead>
            <tbody id="ph-tbody">
              <tr>
                <td colspan="9" class="text-center text-muted py-4">
                  <i class="fas fa-inbox fa-2x d-block mb-2 opacity-25"></i>
                  No data loaded
                </td>
              </tr>
            </tbody>
            <!-- Summary Footer -->
            <tfoot id="ph-tfoot" style="display:none;background:#d1e7dd;font-weight:700;">
              <tr>
                <td colspan="4" class="px-3 text-end">Totals:</td>
                <td class="text-end" id="ph-sum-qty">—</td>
                <td class="text-end" id="ph-sum-bonus">—</td>
                <td></td>
                <td></td>
                <td class="text-end" id="ph-sum-total">—</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <!-- Footer -->
      <div class="modal-footer py-2 px-4 border-0" style="background:#f0faf4;">
        <small class="text-muted me-auto">
          <i class="fas fa-keyboard me-1"></i>Press <kbd>Alt+H</kbd> on any row to view its history
        </small>
        <button class="btn btn-sm btn-secondary px-4" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

<!-- BAAD -->
<!-- ── Conflict Resolution Modal (Phase E) ─────────────────────────── -->
<div class="modal fade" id="conflictModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header py-3 px-4" style="background:#fff3cd;border-bottom:2px solid #ffc107;">
        <h6 class="modal-title fw-bold text-dark">
          <i class="fas fa-exclamation-triangle text-warning me-2"></i>
          Need Decision — Products Found in Stock With Different Rates
        </h6>
      </div>
      <div class="modal-body p-0">
        <table class="table table-sm table-bordered mb-0">
          <thead style="background:#f8f9fa;">
            <tr>
              <th class="px-3">Product</th>
              <th class="text-end">Stock</th>
              <th class="text-end">Old Retail</th>
              <th class="text-end">New Retail</th>
              <th class="text-end">Old Purchase</th>
              <th class="text-end">New Purchase</th>
              <!-- BAAD -->
              <th class="text-center" style="min-width:100px;">
                <button type="button" id="btnMergeAll"
                  class="btn btn-sm btn-success py-0 px-2" style="font-size:.75rem;">
                  <i class="fas fa-check-double me-1"></i>Merge All
                </button>
              </th>
              <th class="text-center" style="min-width:130px;">
                <button type="button" id="btnSeparateAll"
                  class="btn btn-sm btn-warning py-0 px-2" style="font-size:.75rem;color:#000;">
                  <i class="fas fa-code-branch me-1"></i>Manage All Separately
                </button>
              </th>
            </tr>
          </thead>
          <tbody id="conflict-tbody">
            <!-- rows injected by JS -->
          </tbody>
        </table>
      </div>
      <div class="modal-footer py-2 px-4 justify-content-between" style="background:#f8f9fa;">
        <small class="text-muted">
          <i class="fas fa-info-circle me-1"></i>
          Select an option for every product before proceeding.
          <strong>Merge</strong> = add to existing stock.
          <strong>Manage Separately</strong> = create new product code with new rates.
        </small>
        <button id="btnConflictOk" class="btn btn-primary btn-sm px-4" disabled>
          <i class="fas fa-check me-1"></i>Proceed
        </button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

{{ settings_dict|json_script:"purchase_flags" }}

<script>
  $(function(){
    // Flags from context (setting_dict)
    const PURCHASE_FLAGS = JSON.parse(document.getElementById('purchase_flags')?.textContent || '{}');
    const PPP_MODE = !!(PURCHASE_FLAGS && PURCHASE_FLAGS.enable_ppp_qty_input);
    const QP_META_URL  = '{% url "purchases:quick_product_meta" %}';
    const QP_SAVE_URL  = '{% url "purchases:quick_create_product" %}';

    // ══════════════════════════════════════════════════════════════════════
    // CURRENCY SYSTEM
    // ══════════════════════════════════════════════════════════════════════

    const CURRENCY_AJAX_URL = '{% url "pos:ajax_currencies" %}';

    // Active currency state  (default: no currency loaded yet)
    let CURR = {
      id:      '',
      code:    '—',
      symbol:  '—',
      rate:    1.0,
      is_base: true,
    };

    // All available currencies (loaded once via AJAX)
    let ALL_CURRENCIES = [];

    // Build dropdown items from loaded currencies
    function buildCurrencyDropdown(currencies){
      const $menu = $('#currencyDropdownMenu').empty();
      if (!currencies.length){
        $menu.append('<li><span class="dropdown-item-text text-muted small">No currencies configured. <a href="{% url "pos:currency_list" %}">Add one</a></span></li>');
        return;
      }
      currencies.forEach(c => {
        const baseTag = c.is_base ? ' <span class="badge bg-primary" style="font-size:.65rem">BASE</span>' : '';
        const rateTag = c.is_base ? '' : `<span class="curr-d-rate">1 ${c.code} = ${parseFloat(c.rate).toFixed(4)} base</span>`;
        const $li = $(`
          <li>
            <a class="dropdown-item curr-dropdown-item ${c.is_base ? 'is-base-item' : ''}" href="#"
               data-currency-id="${c.id}"
               data-currency-code="${c.code}"
               data-currency-symbol="${c.symbol || c.code}"
               data-currency-rate="${c.rate}"
               data-is-base="${c.is_base}">
              <div class="d-flex align-items-center gap-2">
                <span style="font-size:1.1rem; min-width:22px; text-align:center;">${c.symbol || c.code}</span>
                <div>
                  <div class="curr-d-code">${c.code} ${baseTag}</div>
                  <div class="curr-d-name">${c.name}</div>
                  ${rateTag}
                </div>
              </div>
            </a>
          </li>
        `);
        $menu.append($li);
      });
    }

    // Apply selected currency to state + UI
    function applyCurrency(c){
      CURR = {
        id:      c.id,
        code:    c.code,
        symbol:  c.symbol,
        rate:    parseFloat(c.rate) || 1.0,
        is_base: c.is_base === true || c.is_base === 'true',
      };

      // Update button
      $('#curr-symbol').text(CURR.symbol);
      $('#curr-code').text(CURR.code);

      // Show/hide rate input
      if (CURR.is_base){
        $('#currency-rate-wrap').hide();
        $('#currency-rate-input').val('');
      } else {
        $('#currency-rate-wrap').show();
        $('#currency-rate-input').val(CURR.rate);
      }

      // Save to hidden fields
      $('#currency_id_hidden').val(CURR.id);
      $('#currency_rate_hidden').val(CURR.rate);

      // Update "Purchase" column header with currency code
      $('#table_products thead th.col-purchase-header').text(`Purchase (${CURR.code})`);

      // Convert all existing row prices from base → display currency
      $('#table_products tbody tr:not(.template-row)').each(function(){
        const $r = $(this);
        const basePurch  = parseFloat($r.data('base-purchase') || 0);
        const baseRetail = parseFloat($r.data('base-retail') || 0);
        if (basePurch)  $r.find('.purchase-input').val((basePurch / CURR.rate).toFixed(4));
        if (baseRetail) $r.find('.retail-input').val((baseRetail / CURR.rate).toFixed(4));
        recalcRow($r);
      });

      recalcAll();
    }

    // Load currencies via AJAX, then auto-select base
    function loadCurrencies(cb){
      $.get(CURRENCY_AJAX_URL, function(resp){
        ALL_CURRENCIES = resp.currencies || [];
        buildCurrencyDropdown(ALL_CURRENCIES);

        if (!ALL_CURRENCIES.length){
          // No currencies configured → hide selector
          $('#currency-selector-wrap').hide();
          CURR = { id:'', code:'', symbol:'', rate:1.0, is_base:true };
          if (typeof cb === 'function') cb();
          return;
        }

        // Show selector only if more than one currency
        if (ALL_CURRENCIES.length > 1){
          $('#currency-selector-wrap').show();
        } else {
          $('#currency-selector-wrap').hide();
        }

        // Default: select base currency
        const base = ALL_CURRENCIES.find(c => c.is_base) || ALL_CURRENCIES[0];
        applyCurrency(base);
        if (typeof cb === 'function') cb();
      }).fail(function(){
        $('#currency-selector-wrap').hide();
        if (typeof cb === 'function') cb();
      });
    }

    // Dropdown item click
    $(document).on('click', '#currencyDropdownMenu .curr-dropdown-item', function(e){
      e.preventDefault();
      const $el = $(this);
      applyCurrency({
        id:      $el.data('currency-id'),
        code:    $el.data('currency-code'),
        symbol:  $el.data('currency-symbol'),
        rate:    parseFloat($el.data('currency-rate')) || 1.0,
        is_base: $el.data('is-base'),
      });
    });

    // Manual rate change
    $('#currency-rate-input').on('input change', function(){
      const newRate = parseFloat($(this).val()) || 1;
      CURR.rate = newRate;
      $('#currency_rate_hidden').val(newRate);
      // Re-convert rows
      $('#table_products tbody tr:not(.template-row)').each(function(){
        recalcRow($(this));
      });
      recalcAll();
    });

    // ══════════════════════════════════════════════════════════════════════
    // END CURRENCY SYSTEM
    // ══════════════════════════════════════════════════════════════════════



    /**
     * Parse display qty string → backend float
     * "1.6"  ppp=12  → 1 + 6/12  = 1.5
     * "2.12" ppp=12  → 2 + 12/12 = 3.0
     * "0.6"  ppp=12  → 0 + 6/12  = 0.5
     */
    function parseDisplayQty(valStr, ppp) {
      const PPP = parseInt(ppp) || 1;
      if (!PPP_MODE || PPP <= 1) return parseFloat(valStr) || 0;

      const str = String(valStr || '').trim();
      if (!str || isNaN(parseFloat(str))) return 0;
      if (!str.includes('.')) return parseInt(str) || 0;

      const dotIdx = str.indexOf('.');
      const boxes  = parseInt(str.slice(0, dotIdx))  || 0;
      const pieces = parseInt(str.slice(dotIdx + 1)) || 0;   // e.g. "6" not "0.6"

      // safety: if pieces >= ppp, carry over
      const totalBoxes = boxes + Math.floor(pieces / PPP);
      const remPieces  = pieces % PPP;
      return totalBoxes + remPieces / PPP;
    }

    /**
     * Convert backend float → display string for qty input
     * 1.5  ppp=12  → "1.6"
     * 2.0  ppp=12  → "2"
     * 0.5  ppp=12  → "0.6"
     */
    function toDisplayQty(backendQty, ppp) {
      const PPP = parseInt(ppp) || 1;
      const val = parseFloat(backendQty) || 0;
      if (!PPP_MODE || PPP <= 1) return val || '';

      const boxes  = Math.floor(Math.round(val * PPP) / PPP);
      const pieces = Math.round((val - boxes) * PPP);

      if (pieces === 0) return String(boxes);
      return `${boxes}.${pieces}`;   // intentional: "1.6" not "1.50"
    }

    /**
     * Show a compact hint below qty: "1 box + 6 pcs = 18 pcs"
     */
    function updateQtyHint($row) {
      if (!PPP_MODE) return;
      const ppp    = parseInt($row.data('ppp') || 1) || 1;
      if (ppp <= 1) return;
      const dispVal  = $row.find('.qty-input').val();
      const backend  = parseDisplayQty(dispVal, ppp);
      const boxes    = Math.floor(Math.round(backend * ppp) / ppp);
      const pieces   = Math.round((backend - boxes) * ppp);
      const totalPcs = Math.round(backend * ppp);

      let hint = '';
      if (dispVal && backend > 0) {
        if (boxes > 0 && pieces > 0) {
          hint = `${boxes} box + ${pieces} pcs = ${totalPcs} pcs`;
        } else if (boxes > 0) {
          hint = `${boxes} box = ${totalPcs} pcs`;
        } else {
          hint = `${pieces} pcs`;
        }
      }

      let $hint = $row.find('.qty-ppp-hint');
      if (!$hint.length) {
        $hint = $('<div class="qty-ppp-hint text-primary" style="font-size:.7rem;line-height:1.2;white-space:nowrap;"></div>');
        $row.find('.qty-input').after($hint);
      }
      $hint.text(hint);
    }


    // Code field disable rule: barcode == 0/false and show_purchase_code_column != true
    const CODE_DISABLED =
      (!PURCHASE_FLAGS?.show_purchase_code_column) &&
      (
        PURCHASE_FLAGS?.barcode === 0 ||
        PURCHASE_FLAGS?.barcode === '0' ||
        PURCHASE_FLAGS?.barcode === false ||
        typeof PURCHASE_FLAGS?.barcode === 'undefined' ||
        PURCHASE_FLAGS?.barcode === null
      );
    const WAREHOUSE_DISABLED =
      (!PURCHASE_FLAGS?.show_purchase_warehouse_column);

    // Map: flag → column selector
    // BAAD
    const COL_FLAG_MAP = [
      ['show_purchase_code_column',             '.col-code'],
      ['show_purchase_margin_column',           '.col-margin'],
      ['show_purchase_serial_column',           '.sno'],
      ['show_purchase_retail_column',           '.col-retail'],
      ['show_purchase_gst_column',              '.col-gst, .col-gstamt'],   // ← GST% + GST Amt ek hi toggle
      ['show_purchase_ftax_column',             '.col-ftax, .col-ftaxamt'], // ← F-Tax% + F-Tax Amt ek hi toggle
      ['show_purchase_taxtype_column',          '.col-taxtype'],             // ← NEW
      ['show_purchase_mrp_column',              '.col-mrp'],                 // ← NEW
      ['show_purchase_netrate_column',          '.col-netrate'],             // ← NEW
      ['show_purchase_disc_column',             '.col-discamt'],
      ['show_purchase_disc_percent_column',     '.col-discpct'],
      ['show_purchase_bonus_column',            '.col-bonus'],
      ['show_purchase_extras_column',           '.col-extras'],
      ['show_purchase_batch_column',            '.col-batch'],
      ['show_purchase_expiry_column',           '.col-expiry'],
      ['show_purchase_warehouse_column',        '.col-speca'],
    ];

    function openSpecASearch($row){
      const $sel = $row.find('.speca-select');
      if ($sel.data('select2')) $sel.select2('open');
    }

    function applyPickedProduct($row, d){
      $row.find('.serials-json').val('[]');
      setExtrasIcons($row);

      const code = d.product_code || d.code || '';
      updateInfoBar(code);
      $row.find('.code-input').val(code);

      // ── CURRENCY: product prices from DB are in BASE currency
      //    Divide by CURR.rate to display in selected currency
      const basePurch  = parseFloat(d.purchase_price ?? d.purchase ?? 0);
      const baseRetail = parseFloat(d.l_sale_price   ?? d.retail   ?? 0);
      const dispPurch  = CURR.rate > 0 ? basePurch  / CURR.rate : basePurch;
      const dispRetail = CURR.rate > 0 ? baseRetail / CURR.rate : baseRetail;
      const ppp = parseInt(d.pieces_per_pack || d.ppp || 1) || 1;

      $row.data('ppp', ppp);
      $row.data('base-purchase', basePurch);
      $row.data('base-retail',   baseRetail);

      // BAAD
      $row.find('.purchase-input').val(dispPurch  || '');
      $row.find('.retail-input').val(dispRetail   || '');
      // MRP auto-fills from retail on product select (user-edited flag reset)
      $row.find('.mrp-input').val(dispRetail > 0 ? dispRetail.toFixed(2) : '').data('user-edited', false);
      // Purchase border reset (fresh product selected)
      $row.find('.purchase-input').removeClass('price-higher price-lower');
      // Global Tax Type bhi apply karo nayi row par
      const _gTaxType = $('#global_tax_type').val() || '0';
      $row.find('.taxtype-select').val(_gTaxType);
      // ── auto-fill margin from loaded prices ───────────────────────────
      $row.find('.margin-input').val('');

      // for code-hidden flow (important)
      $row.find('.name-select').data('product_code', code);

      // serial flag + gate
      if (typeof d.is_serial_tracked !== 'undefined') {
        $row.find('.is-serial-tracked').val(
          (d.is_serial_tracked === true || d.is_serial_tracked === 1 || d.is_serial_tracked === '1') ? '1' : '0'
        );
        gateSerialButton($row);
      }

      recalcRow($row);
      recalcAll();

      if (!WAREHOUSE_DISABLED){
        ensureSpecCaches(() => {
          initInlineSpecASelect2($row, '');
          if ((SPEC_A_CACHE || []).length) {
            openSpecASearch($row);
          } else {
            $row.find('.qty-input').focus();
          }
        });
      }else{
        $row.find('.qty-input').focus();
      }
    }

    function isLastVisibleEditableInRow($el){
      const $row = $el.closest('tr');
      const $controls = $row.find('input:visible').not('[type=hidden]');
      const idx = $controls.index($el);
      return idx === $controls.length - 1;
    }

    function applyColumnVisibility(flags){
      COL_FLAG_MAP.forEach(([key, sel]) => {
        const on = !!(flags && flags[key]);
        const $cells = $('#table_products').find('th'+sel+', td'+sel);
        $cells.each(function(){
          this.style.setProperty('display', on ? 'table-cell' : 'none', 'important');
        });

        if (!on && sel !== '.col-extras' && sel !== '.col-code'){
          $('#table_products tbody').find('td'+sel+' input').each(function(){
            if (this.type === 'number')    $(this).val('');
            else if (this.type === 'text') $(this).val('');
            else if (this.type === 'date') $(this).val('');
          });
        }
      });

      // BAAD
      if (typeof recalcAll === 'function') recalcAll();
      updateTableScroll();
    }

    function updateTableScroll() {
      const visibleCols = $('#table_products thead th:visible').length;
      const $tbl = $('#table_products');
      if (visibleCols > 7) {
        $tbl.addClass('tbl-scroll-on');
        $tbl.closest('.table-responsive').css('overflow-x', 'auto');
      } else {
        $tbl.removeClass('tbl-scroll-on');
        $tbl.closest('.table-responsive').css('overflow-x', '');
      }
    }

    function openNameSearch($row){
      const $sel = $row.find('.name-select');
      if (!$sel.data('select2')) {
        $sel.select2({ theme:'bootstrap4', width:'100%' });
      }
      $sel.select2('open');
      setTimeout(() => {
        const fld = document.querySelector('.select2-container--open .select2-search__field');
        if (fld) fld.focus();
      }, 0);
    }

    const common = { theme: 'bootstrap4', width: '100%' };

    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    window.__INITIAL_PURCHASE__ = {{ initial_purchase_json|default:"null"|safe }};

    const SPEC_URL = '{% url "purchases:get_spec_terms" %}';
    let SPEC_A_CACHE = null;
    let SPEC_B_CACHE = null;

    let __lastFocusInTable = null;
    $('#table_products').on('focusin', 'input:visible', function(){
      const $cur = $(this);
      const $prev = __lastFocusInTable;
      __lastFocusInTable = $cur;

      if ($prev && $prev.hasClass('code-input')) {
        const $row = $prev.closest('tr');
        const codeVal = ($prev.val() || '').trim();

        if (CODE_DISABLED || !codeVal) {
          setTimeout(() => openNameSearch($row), 0);
        }
      }
    });

    $('#table_products').on('focusin', '.code-input', function(){
      if (!CODE_DISABLED) return;
      const $row = $(this).closest('tr');
      setTimeout(() => openNameSearch($row), 0);
    });

    function normalizeSpecPayload(data){
      const arr = Array.isArray(data) ? data : (Array.isArray(data.results) ? data.results : []);
      return arr.map(it => ({
        id:   it.id ?? it.value ?? it.name,
        text: it.text ?? it.label ?? it.name
      }));
    }

    function initSpecSelect2($select, type, selectedId){
      if ($select.data('select2')) { $select.off('select2:open').select2('destroy'); }
      $select.empty();

      $select.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Select…',
        minimumInputLength: 0,
        ajax: {
          url: SPEC_URL,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 200,
          data: params => ({ type, term: params.term || '' }),
          processResults: data => ({ results: normalizeSpecPayload(data) }),
          cache: true
        }
      }).on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      });

      if (selectedId != null && selectedId !== '') {
        const cache = (type === 'A') ? SPEC_A_CACHE : SPEC_B_CACHE;
        const found = cache && cache.find(it => String(it.id) === String(selectedId));
        const opt   = new Option(found ? found.text : String(selectedId), String(selectedId), true, true);
        $select.append(opt).trigger('change');
      }
    }

    function fetchSpecTerms(type){
      return $.ajax({
        url: SPEC_URL,
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        data: { type }
      }).then(resp => normalizeSpecPayload(resp));
    }

    function ensureSpecCaches(cb){
      const pA = SPEC_A_CACHE
        ? $.Deferred().resolve().promise()
        : fetchSpecTerms('A').then(list => { SPEC_A_CACHE = list; });

      const pB = SPEC_B_CACHE
        ? $.Deferred().resolve().promise()
        : fetchSpecTerms('B').then(list => { SPEC_B_CACHE = list; });

      const whenAll = $.when(pA, pB);
      if (typeof cb === 'function') whenAll.done(cb);
      return whenAll;
    }

    function fillSpecSelect($select, items, selectedId){
      $select.empty();
      $select.append(new Option('', '', true, false));
      items.forEach(it => $select.append(new Option(it.text, it.id)));

      if ($select.data('select2')) {
        $select.off('select2:open').select2('destroy');
      }
      $select.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Select...'
      }).on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      });

      if (selectedId != null && selectedId !== '') {
        $select.val(String(selectedId)).trigger('change');
      }
    }

    // 3) Party Select2
    function billTypeParty(bt) {
      return (bt === 'vendor_purchase' || bt === 'vendor_return') ? 'vendor' : 'customer';
    }

    function initPartySelect2(){
      const bt   = $('#ui_bill_type').val();
      const type = billTypeParty(bt);
      const url  = type === 'vendor'
        ? '{% url "purchases:get_vendors" %}'
        : '{% url "customers:get_customers" %}';

      if ($('#vendor_select').data('select2')) {
        $('#vendor_select').select2('destroy');
      }

      $('#vendor_select').select2({
        ...common,
        placeholder: type === 'vendor' ? 'Search vendor…' : 'Search customer…',
        minimumInputLength: 1,
        allowClear: true,
        dropdownParent: $(document.body),
        ajax: {
          url: url,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: data => {
            let items = Array.isArray(data) ? data
              : Array.isArray(data.results) ? data.results : [];
            const mapped = items.map(v => ({
              id:   v.value ?? v.id,
              text: v.label ?? v.text,
              balance: v.balance ?? 0   // ← NEW: previous balance
            }));
            return { results: mapped };
          },
          cache: true
        },
        templateResult: r => {
          if (r.loading) return r.text;
          const bal = parseFloat(r.balance || 0);
          const balColor = bal > 0 ? '#c81e1e' : '#198754';
          const balTxt = bal !== 0 ? `<span style="float:right;font-size:.78rem;font-weight:700;color:${balColor}">Bal: ${bal.toFixed(2)}</span>` : '';
          return $(`<div style="display:flex;justify-content:space-between;align-items:center;"><span><strong>${r.text}</strong></span>${balTxt}</div>`);
        },
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (!fld) return;
          const data = $('#vendor_select').select2('data');
          const txt  = (data && data[0] && data[0].text) ? data[0].text : '';
          fld.value = txt;
          fld.focus();
          fld.setSelectionRange(txt.length, txt.length);
          if (txt) $(fld).trigger('input');
        }, 0);
      })
      .on('select2:select', e => {
        currentPartyBalance = parseFloat(e.params.data.balance) || 0;
        updateBalance();
        if (CODE_DISABLED) openNameSearch($('#table_products tbody tr:not(.template-row)').last());
        else $('#table_products tbody tr:not(.template-row)').last().find('.code-input').focus();
      })
      .on('select2:clear select2:unselect', () => {
        currentPartyBalance = 0;
        updateBalance();
      });
    }

    setTimeout(() => $('#vendor_select').select2('open'), 0);


    function addRow(data = {}) {
      const $row = $('.template-row')
        .clone()
        .removeClass('template-row d-none');
      $('#table_products tbody').append($row);

      $('#table_products tbody tr:not(.template-row)').each((i, tr) => {
        $(tr).find('.sno').text(i + 1);
      });

      Object.entries(data).forEach(([k, v]) => {
        const $inp = $row.find('.' + k + '-input');
        if ($inp.length) $inp.val(v);
      });

      const $nameSel = $row.find('.name-select');

      $nameSel.select2({
        ...common,
        placeholder: 'Search product…',
        minimumInputLength: 1,
        allowClear: true,
        tags: false,

        ajax: {
          url: '{% url "products:get_products" %}',
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: (resp, params) => {
            const results = Array.isArray(resp) ? resp : (resp.results || []);
            const term = (params.term || '').trim();
            if (term && results.length === 0) {
              results.push({
                id: '__create__:' + term,
                text: term,
                newTag: true
              });
            }
            return { results };
          }
        },

        templateResult: r => {
          if (r.loading) return r.text;
          if (r.newTag) {
            return $(`<div class="text-primary"><i class="fas fa-plus"></i> Create: <strong>${r.text}</strong></div>`);
          }
          const pur   = parseFloat(r.purchase_price || 0).toFixed(2);
          const ret   = parseFloat(r.l_sale_price   || 0).toFixed(2);
          const stock = parseFloat(r.present_stock  || 0).toFixed(0);
          const comp  = r.prod_company || '';
          const stockColor = parseFloat(stock) > 0 ? '#e65100' : '#dc3545';
          return $(`
            <div class="prod-result-row">
              <span class="pr-name">${r.text || r.name || ''}</span>
              <span class="pr-pur">P:${pur}</span>
              <span class="pr-ret">R:${ret}</span>
              <span class="pr-comp">${comp}</span>
              <span class="pr-stock" style="color:${stockColor}">Stk:${stock}</span>
            </div>
          `);
        },
        dropdownAutoWidth: true,
        width: 'auto',
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (!fld) return;
          const data = $nameSel.select2('data');
          const txt  = (data && data[0] && data[0].text) ? data[0].text : '';
          fld.value = txt;
          fld.focus();
          fld.setSelectionRange(txt.length, txt.length);
          if (txt) $(fld).trigger('input');
        }, 0);
      })
      .on('select2:select', e => {
        const d = e.params.data;

        if (d && d.newTag) {
          $nameSel.val(null).trigger('change');
          qpOpen({ $row, name: d.text });
          return;
        }

        applyPickedProduct($row, d);
      });

      const _spec_id = (data.spec_a_id != null) ? String(data.spec_a_id) : '';
      ensureSpecCaches(() => initInlineSpecASelect2($row, _spec_id));

      if (data.prod_id && data.name) {
        const preopt = new Option(data.name, data.prod_id, true, true);
        $nameSel.append(preopt).trigger('change');
      }

      // ── CURRENCY: on addRow from edit prefill, store base values
      //    and display in selected currency
      const rawPurch  = parseFloat(data.purchase ?? 0);
      const rawRetail = parseFloat(data.retail   ?? 0);

      // In edit mode, DB values ARE already in base currency
      // Display them in current selected currency
      const dispPurch  = (rawPurch  && CURR.rate > 0) ? rawPurch  / CURR.rate : rawPurch;
      const dispRetail = (rawRetail && CURR.rate > 0) ? rawRetail / CURR.rate : rawRetail;

      $row.data('base-purchase', rawPurch);
      $row.data('base-retail',   rawRetail);

      // PPP: convert backend qty → display format for edit prefill
      const _ppp = parseInt(data.ppp || 1) || 1;
      $row.data('ppp', _ppp);
      const _rawQty = parseFloat(data.qty ?? data.quantity ?? 0) || 0;
      $row.find('.qty-input').val(_rawQty ? toDisplayQty(_rawQty, _ppp) : '');
      $row.find('.purchase-input').val(dispPurch  || '');
      $row.find('.retail-input').val(dispRetail   || '');
      $row.find('.margin-input').val('');   // margin always starts blank
      $row.find('.discamt-input').val(data.disc_amt ?? data.discount ?? '');
      $row.find('.discpct-input').val(data.disc_pct ?? data.disc ?? '');
      $row.find('.bonus-input').val(data.bonus ?? data.bonus_qty ?? '');
      // BAAD
      $row.find('.batch-input').val(data.batch ?? '');
      $row.find('.expiry-input').val(expiryToDisplay(data.expiry));
      $row.find('.taxtype-select').val(String(data.tax_type ?? 0));
      $row.find('.mrp-input').val(data.mrp ?? '').data('user-edited', !!(data.mrp));

      const sList  = Array.isArray(data.serials) ? data.serials : [];
      $row.find('.serials-json').val(JSON.stringify(sList));

      if (sList.length > 0) {
        $row.find('.is-serial-tracked').val('1');
      }

      if (data.is_serial_tracked != null) {
        $row.find('.is-serial-tracked').val(data.is_serial_tracked ? '1' : '0');
      }

      setExtrasIcons($row);
      gateSerialButton($row);

      recalcRow($row);
      recalcAll();
      afterAddRow($row);
      applyColumnVisibility(PURCHASE_FLAGS);

      return $row;
    }

    // Start with one blank row
    addRow();
    applyColumnVisibility(PURCHASE_FLAGS);

    // Delete row handler
    $('#table_products').on('click', '.delete-row', function () {
      const $row  = $(this).closest('tr');
      const $rows = $('#table_products tbody tr:not(.template-row)');

      if ($rows.length <= 1) {
        Swal.fire('At least one row is required', '', 'info');
        return;
      }

      const $next = $row.nextAll(':not(.template-row)').first();
      const $prev = $row.prevAll(':not(.template-row)').first();

      $row.remove();

      $('#table_products tbody tr:not(.template-row)').each((i, tr) => {
        $(tr).find('.sno').text(i + 1);
      });

      recalcAll();

      const $target = $next.length ? $next : ($prev.length ? $prev : $('#table_products tbody tr:not(.template-row)').last());
      if (typeof CODE_DISABLED !== 'undefined' && CODE_DISABLED) {
        openNameSearch($target);
      } else {
        const $code = $target.find('.code-input');
        if ($code.length) $code.focus();
        else openNameSearch($target);
      }
    });


    // Code → lookup on Enter
    $('#table_products').on('keydown','.code-input',function(e){
      if (e.which===13){
        e.preventDefault();
        const $r = $(this).closest('tr'), code = $(this).val().trim();
        if (!code){
          $r.find('.name-select').select2('open');
          return;
        }
      $.get("{% url 'products:search_product' %}", { product_code: code }, resp => {
      if (resp.error) {
        qpOpen({ $row: $r, code: code });
      } else {
        $r.find('.name-select')
          .append(new Option(resp.name, resp.id, true, true))
          .trigger('change');

        applyPickedProduct($r, resp);
      }

      });

      }
    });

    // BAAD
    function recalcRow($r){

      const codeVal = $r.find('.code-input').val().trim();
      if (!codeVal) {
        $r.find('.total-cell').text('0.00');
        return;
      }

      const _rowPpp = parseInt($r.data('ppp') || 1) || 1;
      const q  = parseDisplayQty($r.find('.qty-input').val(), _rowPpp);
      const p  = parseFloat($r.find('.purchase-input').val())||0;
      const g  = parseFloat($r.find('.gst-input').val())||0;
      const f  = parseFloat($r.find('.ftax-input').val())||0;
      const da = parseFloat($r.find('.discamt-input').val())||0;
      const dp = parseFloat($r.find('.discpct-input').val())||0;
      const taxType = parseInt($r.find('.taxtype-select').val()||0);
      const mrp     = parseFloat($r.find('.mrp-input').val())||0;

      const full = q * p;

      // Tax on MRP → tax base = qty × MRP; otherwise qty × purchase
      const taxBase = (taxType === 1 && mrp > 0) ? (q * mrp) : full;
      const gstAmt  = taxBase * g / 100;
      const ftaxAmt = taxBase * f / 100;

      // Sync Amt fields (only if user isn't actively typing in them)
      if (!$r.find('.gstamt-input').is(':focus'))
        $r.find('.gstamt-input').val(q > 0 ? gstAmt.toFixed(2) : '');
      if (!$r.find('.ftaxamt-input').is(':focus'))
        $r.find('.ftaxamt-input').val(q > 0 ? ftaxAmt.toFixed(2) : '');

      const tot = full + gstAmt + ftaxAmt - da;
      $r.find('.total-cell').text(tot.toFixed(2));

      // Net Rate (per-unit landed cost)
      if (!$r.find('.netrate-input').is(':focus')) {
        $r.find('.netrate-input').val(q > 0 ? tot.toFixed(2) : '');
      }
    }

    function handlePctChange($r){

      const _pctPpp = parseInt($r.data('ppp') || 1) || 1;
      const q = parseDisplayQty($r.find('.qty-input').val(), _pctPpp);
      // const q   = parseFloat($r.find('.qty-input').val())||0;
      const p   = parseFloat($r.find('.purchase-input').val())||0;
      const g   = parseFloat($r.find('.gst-input').val())||0;
      const f   = parseFloat($r.find('.ftax-input').val())||0;
      const da  = parseFloat($r.find('.discamt-input').val())||0;
      const dp  = parseFloat($r.find('.discpct-input').val())||0;

      const full = q*p;
      const tax  = full*(g+f)/100;
      const net  = full + tax;
      const dis_per_amt = full * 0.01 * dp;
      $r.find('.discamt-input').val(dis_per_amt.toFixed(2));
      recalcRow($r);
      recalcAll();
    }

    // Recalc all & grand total
    function recalcAll(){
      let sub = 0;
      $('#table_products tbody tr:not(.template-row)').each(function(){
        sub += parseFloat($(this).find('.total-cell').text()) || 0;
      });
      $('#sub_total').val(sub.toFixed(2));

      const fd  = parseFloat($('#flat_disc_amount').val()) || 0;
      const oe  = parseFloat($('#other_charges').val())    || 0;
      const be  = parseFloat($('#builty_expenses').val())  || 0;
      const gst = parseFloat($('#flat_gst').val())         || 0;
      const ft  = parseFloat($('#f_tax').val())            || 0;

      const base    = sub - fd + oe;
      const taxGst  = base * (gst / 100);
      const taxF    = base * (ft  / 100);
      const grand   = base + taxGst + taxF;

      $('#grand_total').val(grand.toFixed(2));

      // ── CURRENCY: show base-equivalent hint when non-base currency active
      if (!CURR.is_base && CURR.rate > 0){
        const grandBase = grand * CURR.rate;
        $('#curr-base-hint').text(`= ${grandBase.toFixed(2)} (base)`);
      } else {
        $('#curr-base-hint').text('');
      }

      updateBalance();
      recalcInfoBarTotals();
    }

    var currentPartyBalance = 0;

    function updateBalance(){
      const bill = parseFloat($('#grand_total').val()) || 0;
      let paid   = parseFloat($('#paid_amount').val())  || 0;
      if (paid < 0) { paid = 0; $('#paid_amount').val(0); }

      const combined = (currentPartyBalance || 0) + bill;
      $('#prev_balance').val((currentPartyBalance || 0).toFixed(2));
      $('#bill_amount').val(bill.toFixed(2));
      $('#combined_balance').val(combined.toFixed(2));

      const remaining = combined - paid;
      $('#balance_due').val(remaining.toFixed(2));
      $('#balance_due')
        .toggleClass('is-clear', Math.abs(remaining) < 0.005)
        .toggleClass('is-due',  remaining > 0.005);
    }

    // Show the Payment box only for purchase bills (we pay vendor/customer)
    function syncPaymentBoxVisibility(){
      const bt = $('#ui_bill_type').val();
      const isPurchase = (bt === 'vendor_purchase' || bt === 'customer_purchase');
      $('#payment-box').toggle(isPurchase);
      if (!isPurchase){ $('#paid_amount').val(''); $('#bank_select').val('0'); }
      updateBalance();
    }

    // ── Builty Payment Panel ─────────────────────────────────────────────────
    function syncBuiltyPanel() {
      const amt = parseFloat($('#builty_expenses').val()) || 0;
      if (amt > 0) {
        $('#builty-payment-panel').slideDown(180);
        syncBuiltyPaidDetails();
      } else {
        $('#builty-payment-panel').slideUp(180);
        $('#builty_is_paid').prop('checked', false);
        syncBuiltyPaidDetails();
      }
    }
    function syncBuiltyPaidDetails() {
      if ($('#builty_is_paid').is(':checked')) {
        $('#builty-paid-details').css('display', 'flex');
      } else {
        $('#builty-paid-details').hide();
      }
    }
    $('#builty_expenses').on('input change', syncBuiltyPanel);
    $('#builty_is_paid').on('change', syncBuiltyPaidDetails);
    // ── /Builty Payment Panel ────────────────────────────────────────────────

    $('#paid_amount').on('keyup change input', updateBalance);


    // Auto-select on focus — sirf specific numeric columns, Select2 untouched
    const AUTO_SEL =
      '.qty-input,.purchase-input,.margin-input,.retail-input,' +
      '.gst-input,.ftax-input,.gstamt-input,.ftaxamt-input,' +
      '.mrp-input,.netrate-input,.discamt-input,.discpct-input,.bonus-input,' +
      '#flat_disc_amount,#flat_disc_pct,#other_charges,' +
      '#builty_expenses,#flat_gst,#f_tax,#paid_amount';

    $(document)
      .on('focus', AUTO_SEL, function () {
        const el = this;
        setTimeout(() => {
          if (document.activeElement === el) el.select(); // ← sirf tab select karo jab focus abhi bhi yahin ho
        }, 0);
      })
      .on('mouseup', AUTO_SEL, function (e) {
        if (document.activeElement === this) e.preventDefault();
      });


    // Disc % → compute Disc Amount, then recalc
    $('#flat_disc_pct').on('keyup change', function(){
      const sub = parseFloat($('#sub_total').val()) || 0;
      const pct = parseFloat($(this).val()) || 0;
      const amt = sub * pct / 100;
      $('#flat_disc_amount').val(amt.toFixed(2));
      recalcAll();
    });

    // Disc Amount → compute Disc %, then recalc
    $('#flat_disc_amount').on('keyup change', function(){
      const sub = parseFloat($('#sub_total').val()) || 0;
      const amt = parseFloat($(this).val()) || 0;
      const pct = sub ? (amt / sub * 100) : 0;
      $('#flat_disc_pct').val(pct.toFixed(2));
      recalcAll();
    });

    $('#other_charges, #builty_expenses, #flat_gst, #f_tax')
      .on('keyup change', recalcAll);

    recalcAll();

    // Any input → recalc
    $('#table_products').on('input', 'input:not(.discpct-input)', function(){
      const $row = $(this).closest('tr');
      recalcRow($row);
      recalcAll();
      if ($(this).hasClass('qty-input')) updateQtyHint($row);
    });

    $('#table_products').on('input', '.discpct-input', function(){
      const $row = $(this).closest('tr');
      handlePctChange($row);
      recalcAll();
    });

    // BAAD
    // ══════════════════════════════════════════════════════════════════════
    // MARGIN (%) ↔ RETAIL / PURCHASE
    //
    // manage_margin_on_retail_price = false (default/markup):
    //   Margin typed   → Retail  = Purchase × (1 + M/100)
    //   Retail typed   → if M>0: Purchase = Retail / (1 + M/100)
    //   Purchase typed → if M>0: Retail   = Purchase × (1 + M/100)
    //
    // manage_margin_on_retail_price = true (margin on retail):
    //   Margin typed   → Retail  = Purchase / (1 - M/100)
    //   Retail typed   → if M>0: Purchase = Retail × (1 - M/100)
    //   Purchase typed → if M>0: Retail   = Purchase / (1 - M/100)
    // ══════════════════════════════════════════════════════════════════════
    const MARGIN_ON_RETAIL = !!(PURCHASE_FLAGS && PURCHASE_FLAGS.manage_margin_on_retail_price);

    function calcRetailFromPur(pur, m) {
      if (!m) return pur;
      return MARGIN_ON_RETAIL
        ? pur / Math.max(1 - m / 100, 0.001)   // margin on retail
        : pur * (1 + m / 100);                  // markup on purchase
    }
    function calcPurFromRetail(ret, m) {
      if (!m) return ret;
      return MARGIN_ON_RETAIL
        ? ret * (1 - m / 100)                   // margin on retail
        : ret / Math.max(1 + m / 100, 0.001);   // markup on purchase
    }

    $('#table_products').on('input', '.margin-input', function () {
      const $row   = $(this).closest('tr');
      const pur    = parseFloat($row.find('.purchase-input').val()) || 0;
      const margin = parseFloat($(this).val()) || 0;
      $row.find('.retail-input').val(calcRetailFromPur(pur, margin).toFixed(2));
      recalcRow($row);
      recalcAll();
    });

    $('#table_products').on('input', '.retail-input', function () {
      const $row   = $(this).closest('tr');
      const ret    = parseFloat($(this).val()) || 0;
      const margin = parseFloat($row.find('.margin-input').val()) || 0;
      if (margin > 0) {
        $row.find('.purchase-input').val(calcPurFromRetail(ret, margin).toFixed(4));
      }
      // MRP auto-follows Retail (only when not manually overridden)
      if (!$row.find('.mrp-input').data('user-edited')) {
        $row.find('.mrp-input').val(ret > 0 ? ret.toFixed(2) : '');
      }
      recalcRow($row);
      recalcAll();
    });

    $('#table_products').on('input', '.purchase-input', function () {
      const $row   = $(this).closest('tr');
      const pur    = parseFloat($(this).val()) || 0;
      const margin = parseFloat($row.find('.margin-input').val()) || 0;
      if (margin > 0) {
        $row.find('.retail-input').val(calcRetailFromPur(pur, margin).toFixed(2));
      }
      // Purchase price border: compare vs last-purchase stored at product-select time
      const lastPur = parseFloat($row.data('base-purchase') || 0);
      $(this)
        .toggleClass('price-higher', pur > 0 && lastPur > 0 && pur > lastPur)
        .toggleClass('price-lower',  pur > 0 && lastPur > 0 && pur < lastPur);
      recalcRow($row);
      recalcAll();
    });

    // MRP: mark as user-edited when typed manually
    $('#table_products').on('input', '.mrp-input', function () {
      const $row = $(this).closest('tr');
      $(this).data('user-edited', parseFloat($(this).val()) > 0);
      recalcRow($row);
      recalcAll();
    });

    // BAAD
    // ── GST Amount ↔ GST% bidirectional ─────────────────────────────────────
    $('#table_products').on('input', '.gstamt-input', function () {
      const $row   = $(this).closest('tr');
      const amt    = parseFloat($(this).val()) || 0;
      const q      = parseDisplayQty($row.find('.qty-input').val(), parseInt($row.data('ppp')||1)||1);
      const p      = parseFloat($row.find('.purchase-input').val()) || 0;
      const mrp    = parseFloat($row.find('.mrp-input').val()) || 0;
      const taxType = parseInt($row.find('.taxtype-select').val() || 0);
      const base   = (taxType === 1 && mrp > 0) ? (q * mrp) : (q * p);
      if (base > 0 && !$row.find('.gst-input').is(':focus')) {
        $row.find('.gst-input').val((amt / base * 100).toFixed(4));
      }
      recalcRow($row); recalcAll();
    });

    // ── F-Tax Amount ↔ F-Tax% bidirectional ─────────────────────────────────
    $('#table_products').on('input', '.ftaxamt-input', function () {
      const $row   = $(this).closest('tr');
      const amt    = parseFloat($(this).val()) || 0;
      const q      = parseDisplayQty($row.find('.qty-input').val(), parseInt($row.data('ppp')||1)||1);
      const p      = parseFloat($row.find('.purchase-input').val()) || 0;
      const mrp    = parseFloat($row.find('.mrp-input').val()) || 0;
      const taxType = parseInt($row.find('.taxtype-select').val() || 0);
      const base   = (taxType === 1 && mrp > 0) ? (q * mrp) : (q * p);
      if (base > 0 && !$row.find('.ftax-input').is(':focus')) {
        $row.find('.ftax-input').val((amt / base * 100).toFixed(4));
      }
      recalcRow($row); recalcAll();
    });

    // ── Tax Type change → recalc immediately ────────────────────────────────
    $('#table_products').on('change', '.taxtype-select', function () {
      recalcRow($(this).closest('tr')); recalcAll();
    });

    // ── Net Rate reverse: user types total net → back-calc purchase ──────────
    $('#table_products').on('input', '.netrate-input', function () {
      const $row   = $(this).closest('tr');
      const netRateVal = parseFloat($(this).val()) || 0;
      if (!netRateVal) return;
      const q      = parseDisplayQty($row.find('.qty-input').val(), parseInt($row.data('ppp')||1)||1);
      const g      = parseFloat($row.find('.gst-input').val()) || 0;
      const f      = parseFloat($row.find('.ftax-input').val()) || 0;
      const da     = parseFloat($row.find('.discamt-input').val()) || 0;
      const taxType = parseInt($row.find('.taxtype-select').val() || 0);
      // BAAD
      // netRateVal = total line amount (user entered)
      // Reverse: purchase = (netRateVal + disc_amt) / qty / (1 + gst/100 + ftax/100)
      if (taxType !== 1) {
        const taxMult = 1 + (g + f) / 100;
        if (q > 0 && taxMult > 0) {
          const newPur = (netRateVal + da) / q / taxMult;
          if (!$row.find('.purchase-input').is(':focus')) {
            $row.find('.purchase-input').val(newPur.toFixed(4));
          }
        }
      }
      recalcRow($row); recalcAll();
    });

    // ── Expiry (MM/YY only, day fixed to 01) ─────────────────────────────────
    // The box only ever shows/accepts "MM/YY". Whatever gets stored/submitted
    // is always a full date "YYYY-MM-01" so the day component is always 01.
    function expiryToDisplay(raw){
      if (!raw) return '';
      raw = String(raw).trim();
      let m = raw.match(/^(\d{4})-(\d{2})-\d{2}$/);   // legacy "YYYY-MM-DD"
      if (m) return m[2] + '/' + m[1].slice(2);
      if (/^\d{2}\/\d{2}$/.test(raw)) return raw;      // already "MM/YY"
      return raw;                                      // unknown format, show as-is
    }

    function expiryToStored(display){
      const m = String(display || '').trim().match(/^(\d{2})\/(\d{2})$/);
      if (!m) return '';
      return `20${m[2]}-${m[1]}-01`;                    // day fixed to 01
    }

    // Digits-only, auto-inserts "/" after the month, clamps month to 01–12
    $('#table_products').on('input', '.expiry-input', function(){
      let v = $(this).val().replace(/\D/g, '').slice(0, 4);
      if (v.length >= 2) {
        let mm = v.slice(0, 2);
        if (mm === '00') mm = '01';
        if (parseInt(mm, 10) > 12) mm = '12';
        v = mm + v.slice(2);
      }
      $(this).val(v.length > 2 ? v.slice(0, 2) + '/' + v.slice(2) : v);
    });

    // Select existing value on focus so typing straight away overwrites it
    $('#table_products').on('focus', '.expiry-input', function(){
      $(this).select();
    });


    // ── Global Tax Type → sync all existing rows ─────────────────────────────
    $('#global_tax_type').on('change', function () {
      const val = $(this).val();
      $('#table_products tbody tr:not(.template-row)').each(function () {
        $(this).find('.taxtype-select').val(val);
        recalcRow($(this));
      });
      recalcAll();
    });

    const FOOTER_FIELDS = '#flat_discount, #other_charges, #builty_expenses, #flat_gst, #f_tax';

    let __footerPointer = false;
    $(document).on('pointerdown mousedown touchstart', FOOTER_FIELDS, function(){
      __footerPointer = true;
    });

    $(document).on('focusin', FOOTER_FIELDS, function(){
      if (__footerPointer) { __footerPointer = false; return; }

      const $prev = __lastFocusInTable;
      if (!$prev || !$prev.length) return;
      if (!isLastVisibleEditableInRow($prev)) return;

      const $row = $prev.closest('tr');
      tryAddOrFocusNewRow($row);
    });

    function isRowFilled($row) {
      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      return !!code;
    }

    function focusRowStart($row) {
      if (CODE_DISABLED) openNameSearch($row);
      else $row.find('.code-input').focus();
    }

    function tryAddOrFocusNewRow($currentRow) {
      let codeVal = ($currentRow.find('.code-input').val() || '').trim();
      if (!codeVal) {
        const selCode = $currentRow.find('.name-select').data('product_code');
        if (selCode) codeVal = String(selCode);
      }
      const qtyVal = parseFloat($currentRow.find('.qty-input').val()) || 0;
      if (!codeVal || qtyVal <= 0) return;

      const $lastRow = $('#table_products tbody tr:not(.template-row)').last();
      if (!$currentRow.is($lastRow) && !isRowFilled($lastRow)) {
        focusRowStart($lastRow);
        return;
      }
      if ($currentRow.is($lastRow) && !isRowFilled($lastRow) && !codeVal) {
        return;
      }

      const $new = addRow();
      focusRowStart($new);
    }

    $('#table_products').on('keydown', 'input, .name-select', function(e) {
      if (e.which !== 13) return;
      e.preventDefault();

      const $row = $(this).closest('tr');

      const $controls = $row.find('input:visible').not('[type=hidden]');
      const idx = $controls.index(this);
      if (idx < $controls.length - 1) {
        $controls.eq(idx + 1).focus();
      } else {
        tryAddOrFocusNewRow($row);
      }
    });

    // Arrow-key navigation in the products table
    $('#table_products').on('keydown', 'input:visible, select:visible', function(e) {
      const LEFT  = 37;
      const RIGHT = 39;
      if (e.which !== LEFT && e.which !== RIGHT) return;

      e.preventDefault();
      const $controls = $('#table_products')
        .find('input:visible, select:visible')
        .not('.template-row input, .template-row select');
      const idx = $controls.index(this);
      const targetIdx = (e.which === RIGHT) ? idx + 1 : idx - 1;

      if (targetIdx >= 0 && targetIdx < $controls.length) {
        $controls.eq(targetIdx).focus();
      }
    });

    // Up/Down arrow navigation in the products table
    $('#table_products').on('keydown', 'input:visible, select:visible', function(e) {
      const UP   = 38;
      const DOWN = 40;
      if (e.which !== UP && e.which !== DOWN) return;

      e.preventDefault();
      const $cell     = $(this).closest('td');
      const colIndex  = $cell.index();
      const $rows     = $('#table_products tbody tr').not('.template-row');
      const rowIndex  = $rows.index( $cell.closest('tr') );
      const targetRow = (e.which === DOWN)
        ? $rows.eq(rowIndex + 1)
        : $rows.eq(rowIndex - 1);

      if (!targetRow.length) return;
      const $targetCell = targetRow.find('td').eq(colIndex);
      const $ctrl       = $targetCell.find('input:visible, select:visible').first();
      if (!$ctrl.length) return;

      $ctrl.focus();
    });

    // ── SAVE BUTTON ────────────────────────────────────────────────────────
    $('#btnSave').click(()=>{
      if (!$('#vendor_select').val()) {
        Swal.fire('Please select a party','','warning'); return;
      }
      const payload = {
        ui_bill_type:  $('#ui_bill_type').val(),
        vendor:        $('#vendor_select').val(),
        date:          $('#purchase_date').val(),
        challan:       $('#challan').val(),
        remarks:       $('#remarks').val(),
        flat_discount: $('#flat_disc_amount').val(),
        builty_expenses: $('#builty_expenses').val(),
        other_charges: $('#other_charges').val(),
        flat_gst:      $('#flat_gst').val(),
        f_tax:         $('#f_tax').val(),
        grand_total:   $('#grand_total').val(),
        sub_total:     $('#sub_total').val(),

        // ── Payment (Paid amount in SELECTED display currency) ──────────
        paid:          $('#paid_amount').val() || 0,
        bank_id:       $('#bank_select').val() || 0,

        // ── Builty payment details ──────────────────────────────────────
        builty_is_paid:      $('#builty_is_paid').is(':checked'),
        builty_payment_mode: 'Bank',
        builty_bank_id:      $('#builty_bank_id').val() || 0,
        builty_description:  $('#builty_description').val() || '',

        // ── CURRENCY: include currency info in payload ──────────────────
        // All monetary amounts in payload are in SELECTED (display) currency.
        // Backend will multiply by currency_rate to get base amounts.
        currency_id:   CURR.id   || '',
        currency_rate: CURR.rate || 1,
        // ── END CURRENCY ────────────────────────────────────────────────

        items: []
      };
      let has_valid_row = false;
      $('#table_products tbody tr:not(.template-row)').each(function(){
        const $r = $(this);
        let code = ($r.find('.code-input').val() || '').trim();
        const qty = parseFloat($r.find('.qty-input').val()) || 0;

        if (!code) {
          const selCode = $r.find('.name-select').data('product_code');
          if (selCode) code = String(selCode);
        }

        if (code && qty > 0) {
          has_valid_row = true;
          let specVal = ($r.find(".speca-select").val() || "").trim();
          if (specVal.startsWith('__create__:')) specVal = '';
          payload.items.push({
            code:     code,
            name:     $r.find('.name-select').select2('data')[0]?.text || '',
            qty:      parseDisplayQty($r.find('.qty-input').val(), parseInt($r.data('ppp') || 1) || 1),
            purchase: $r.find('.purchase-input').val(),   // in display currency
            retail:   $r.find('.retail-input').val(),      // in display currency
            gst:      $r.find('.gst-input').val(),
            f_tax:    $r.find('.ftax-input').val(),
            disc_amt: $r.find('.discamt-input').val(),     // in display currency
            disc_pct: $r.find('.discpct-input').val(),
            bonus:    $r.find('.bonus-input').val(),
            batch:    $r.find('.batch-input').val(),
            expiry:   expiryToStored($r.find('.expiry-input').val()),
            total:    $r.find('.total-cell').text(),       // in display currency
            spec_a_id: specVal,
            tax_type: parseInt($r.find('.taxtype-select').val() || 0),   // ← NEW
            mrp:      $r.find('.mrp-input').val() || 0,                  // ← NEW
            serials: JSON.parse($r.find('.serials-json').val() || '[]')
          });
        }

      });

      if (!has_valid_row) {
        Swal.fire('Please add at least one valid item to Save this Bill.', '', 'warning');
        return;
      }

      // BAAD
      // ── AJAX submit — handles conflict resolution response ────────────────
      const _formAction = $('.purchaseForm').attr('action');
      const _csrfVal    = $('[name=csrfmiddlewaretoken]').val();

      // Build FormData with the payload + CSRF
      const _fd = new FormData();
      _fd.append('csrfmiddlewaretoken', _csrfVal);
      _fd.append('purchase_items', JSON.stringify(payload));

      $('#btnSave').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Saving…');

      $.ajax({
        url:         _formAction,
        method:      'POST',
        data:        _fd,
        processData: false,
        contentType: false,
        headers:     { 'X-Requested-With': 'XMLHttpRequest' },
        success: function(resp) {
          $('#btnSave').prop('disabled', false).html('Save Purchase');
          // BAAD
          if (resp.needs_conflict_resolution) {
            _showConflictModal(resp.conflicts, payload, resp.auto_switches || {});
          } else if (resp.success && resp.redirect) {
            window.location.href = resp.redirect;
          } else if (resp.error) {
            Swal.fire('Error', resp.error, 'error');
          }
        },
        error: function(xhr) {
          $('#btnSave').prop('disabled', false).html('Save Purchase');
          let msg = 'Save failed.';
          try { msg = JSON.parse(xhr.responseText).error || msg; } catch(e){}
          Swal.fire('Error', msg, 'error');
        }
      });
    });

    // ── Conflict modal logic ──────────────────────────────────────────────────
    function _showConflictModal(conflicts, originalPayload, autoSwitches) {
      autoSwitches = autoSwitches || {};
      const $tbody = $('#conflict-tbody').empty();

      conflicts.forEach(function(c) {
        const row = `
          <tr data-code="${c.code}">
            <td class="px-3 fw-bold">${c.name}<br><small class="text-muted">${c.code}</small></td>
            <td class="text-end">${c.old_stock}</td>
            <td class="text-end text-secondary">${parseFloat(c.old_retail).toFixed(2)}</td>
            <td class="text-end text-success fw-bold">${parseFloat(c.new_retail).toFixed(2)}</td>
            <td class="text-end text-secondary">${parseFloat(c.old_purchase).toFixed(2)}</td>
            <td class="text-end text-primary fw-bold">${parseFloat(c.new_purchase).toFixed(2)}</td>
            <td class="text-center">
              <input type="radio" class="form-check-input conflict-radio" name="cr_${c.code}" value="merge">
            </td>
            <td class="text-center">
              <input type="radio" class="form-check-input conflict-radio" name="cr_${c.code}" value="separate">
            </td>
          </tr>`;
        $tbody.append(row);
      });

      // Enable OK only when ALL rows have a selection
      function _checkAllSelected() {
        const total    = conflicts.length;
        const selected = $tbody.find('tr[data-code]').filter(function() {
          return $(this).find('.conflict-radio:checked').length > 0;
        }).length;
        $('#btnConflictOk').prop('disabled', selected < total);
      }

      // BAAD
      // "All" buttons — select all rows for that option
      $('#btnMergeAll').off('click').on('click', function () {
        $tbody.find('.conflict-radio[value="merge"]').prop('checked', true);
        _checkAllSelected();
      });
      $('#btnSeparateAll').off('click').on('click', function () {
        $tbody.find('.conflict-radio[value="separate"]').prop('checked', true);
        _checkAllSelected();
      });

      $tbody.off('change').on('change', '.conflict-radio', _checkAllSelected);
      _checkAllSelected();

      // OK button: collect decisions → re-submit with them
      $('#btnConflictOk').off('click').on('click', function() {
        const decisions = {};
        $tbody.find('tr[data-code]').each(function() {
          const code = $(this).data('code');
          const val  = $(this).find('.conflict-radio:checked').val();
          if (val) decisions[code] = val;
        });

        // Attach decisions to payload and re-submit
        // BAAD
        originalPayload.conflict_decisions = decisions;
        originalPayload.auto_switches      = autoSwitches;  // echo back to backend

        $('#conflictModal').modal('hide');
        $('#btnSave').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Saving…');

        const _formAction = $('.purchaseForm').attr('action');
        const _csrfVal    = $('[name=csrfmiddlewaretoken]').val();
        const _fd2 = new FormData();
        _fd2.append('csrfmiddlewaretoken', _csrfVal);
        _fd2.append('purchase_items', JSON.stringify(originalPayload));

        $.ajax({
          url:         _formAction,
          method:      'POST',
          data:        _fd2,
          processData: false,
          contentType: false,
          headers:     { 'X-Requested-With': 'XMLHttpRequest' },
          success: function(resp) {
            $('#btnSave').prop('disabled', false).html('Save Purchase');
            if (resp.success && resp.redirect) {
              window.location.href = resp.redirect;
            } else if (resp.error) {
              Swal.fire('Error', resp.error, 'error');
            }
          },
          error: function(xhr) {
            $('#btnSave').prop('disabled', false).html('Save Purchase');
            let msg = 'Save failed.';
            try { msg = JSON.parse(xhr.responseText).error || msg; } catch(e){}
            Swal.fire('Error', msg, 'error');
          }
        });
      });

      $('#conflictModal').modal('show');
    }

    $(document).on('keydown', function(e) {
      if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.keyCode === 83)) {
        e.preventDefault();
        $('#btnSave').trigger('click');
      }
    });

    // Set Bill Type default (create) OR from server prefill (edit)
    let defaultBT = "{{ initial_ui_bill_type|default:'vendor_purchase' }}";

    {% if initial_purchase_json %}
      const _init = {{ initial_purchase_json|safe }};
      if (_init.ui_bill_type) defaultBT = _init.ui_bill_type;
      $('#ui_bill_type').val(defaultBT).prop('disabled', true);
    {% else %}
      $('#ui_bill_type').val(defaultBT);
    {% endif %}

    initPartySelect2();

    $('#ui_bill_type').on('change', function(){
      $('#vendor_select').val(null).trigger('change');
      initPartySelect2();
      syncPaymentBoxVisibility();
    });
    syncPaymentBoxVisibility();

    setTimeout(() => $('#vendor_select').select2('open'), 0);

    // ── PREFILL ON EDIT ────────────────────────────────────────────────────
    {% if initial_purchase_json %}
    const init = {{ initial_purchase_json|safe }};

    if (init.ui_bill_type) {
      $('#ui_bill_type').val(init.ui_bill_type).prop('disabled', true);
      initPartySelect2();
    }

    let partyOpt = new Option(init.vendor_name, init.vendor, true, true);
    $('#vendor_select').append(partyOpt).trigger('change');

    $('#purchase_date').val(init.date);
    $('#challan').val(init.challan);
    $('#remarks').val(init.remarks);
    $('#flat_disc_amount').val(init.flat_discount);
    const _prefillSub = parseFloat($('#sub_total').val()) || 0;
    if (_prefillSub) {
      $('#flat_disc_pct').val((parseFloat(init.flat_discount || 0) / _prefillSub * 100).toFixed(2));
    }
    $('#builty_expenses').val(init.builty_expenses);
    $('#other_charges').val(init.other_charges);

    // Builty panel pre-fill (edit mode)
    if (parseFloat(init.builty_expenses) > 0) {
      if (init.builty_is_paid) $('#builty_is_paid').prop('checked', true);
      if (init.builty_bank_id) $('#builty_bank_id').val(String(init.builty_bank_id));
      if (init.builty_description) $('#builty_description').val(init.builty_description);
      syncBuiltyPanel();
    }
    $('#flat_gst').val(init.flat_gst);
    $('#f_tax').val(init.f_tax);

    // Payment prefill (paid amount + which bank)
    $('#paid_amount').val(init.paid != null ? init.paid : '');
    $('#bank_select').val(String(init.bank_id != null ? init.bank_id : 0));
    syncPaymentBoxVisibility();

    // ── CURRENCY: load currencies THEN add rows
    //    so that prices convert correctly on edit prefill
    loadCurrencies(function(){
      // If edit bill had a saved currency, restore it
      if (init.currency_id && init.currency_rate){
        const savedCurr = ALL_CURRENCIES.find(c => String(c.id) === String(init.currency_id));
        if (savedCurr){
          applyCurrency({ ...savedCurr, rate: parseFloat(init.currency_rate) });
        }
      }
      $('#table_products tbody tr:not(.template-row)').remove();
      init.items.forEach(item => addRow(item));
      applyColumnVisibility(PURCHASE_FLAGS);
      recalcAll();
    });

    {% else %}
    // NEW invoice: load currencies first, then add blank row
    loadCurrencies(function(){
      // blank row already added above, just recalc
      recalcAll();
    });
    {% endif %}

    recalcAll();

    function initInlineSpecASelect2($row, selectedVal){
      const $sel = $row.find('.speca-select');

      if ($sel.data('select2')) {
        $sel.off('select2:open').select2('destroy');
      }

      $sel.empty().append(new Option('Default Variant', '', true, false));

      $sel.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Default Variant',
        minimumInputLength: 0,
        allowClear: false,
        tags: false,

        createTag: function(params){
          const term = (params.term || '').trim();
          if (!term) return null;
          return { id: '__create__:' + term, text: term, newTag: true };
        },

        ajax: {
          url: SPEC_URL,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 200,
          data: params => ({ type: 'A', term: params.term || '' }),
          processResults: data => ({ results: normalizeSpecPayload(data) }),
          cache: true
        },

        templateResult: r => {
          if (r.loading) return r.text;
          if (r.newTag) {
            return $(`<div class="text-primary"><i class="fas fa-plus"></i> Create: <strong>${r.text}</strong></div>`);
          }
          return $(`<div>${r.text}</div>`);
        },
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      })
      .on('select2:select', e => {
        $row.find('.qty-input').focus();
      });

      if (selectedVal != null && String(selectedVal).trim() !== '') {
        const found = (SPEC_A_CACHE || []).find(x => String(x.id) === String(selectedVal));
        const opt = new Option(found ? found.text : String(selectedVal), String(selectedVal), true, true);
        $sel.append(opt).trigger('change');
      } else {
        $sel.val('').trigger('change');
      }
    }

    // ---------- Helpers for Extras ----------
    function rowQtyBonus($row){
      const q = parseFloat($row.find('.qty-input').val()) || 0;
      const b = parseFloat($row.find('.bonus-input').val()) || 0;
      return {q, b, total: q + b};
    }

    function setExtrasIcons($row){
      const hasSer = JSON.parse($row.find('.serials-json').val() || '[]').length > 0;
      $row.find('.btn-add-serials').toggleClass('btn-success', hasSer);
    }

    function gateSerialButton($row){
      const serialTracked = ($row.find('.is-serial-tracked').val() === '1');
      const { total } = rowQtyBonus($row);
      const $btn = $row.find('.btn-add-serials');
      if (serialTracked && total > 0) {
        $btn.prop('disabled', false).attr('title', 'Add Serials');
      } else {
        $btn.prop('disabled', true).attr('title', serialTracked ? 'Enter Qty/Bonus first' : 'Product is not serial-tracked');
      }
    }

    $('#table_products').on('input', '.qty-input, .bonus-input', function(){
      const $row = $(this).closest('tr');
      gateSerialButton($row);
    });

    $('#table_products').on('select2:select', '.name-select', function(e){
      const $row = $(this).closest('tr');
      const d = e.params.data || {};
      const track = d.is_serial_tracked ? '1' : '0';
      $row.find('.is-serial-tracked').val(track);
      gateSerialButton($row);
    });

    function _afterProductLookupFillRow($r, resp){
      $r.find('.is-serial-tracked').val(resp.is_serial_tracked ? '1' : '0');
      gateSerialButton($r);
      setExtrasIcons($r);
    }

    // ---------- Serials Modal ----------
    let SM_ctx = { $row: null, required: 0 };

    function sm_recalc(){
      const n = $('#sm-table tbody tr').length;
      $('#sm-entered').text(n);
      const rem = Math.max(0, (SM_ctx.required - n));
      $('#sm-remaining').text(rem);
      $('#sm-save').prop('disabled', rem !== 0);
      $('#sm-table tbody tr').each(function(i){ $(this).find('.sm-sno').text(i+1); });
    }

    $('#sm-add-row').on('click', function(){
      const $tr = $(`
        <tr>
          <td class="sm-sno"></td>
          <td><input type="text" class="form-control form-control-sm sm-serial" placeholder="Scan/Enter serial"></td>
          <td><input type="text" class="form-control form-control-sm sm-desc1" placeholder="e.g. size, color"></td>
          <td><input type="text" class="form-control form-control-sm sm-desc2" placeholder="e.g. size, color"></td>
          <td><button type="button" class="btn btn-sm btn-danger sm-del">&times;</button></td>
        </tr>
      `);
      $('#sm-table tbody').append($tr);
      sm_recalc();
      return $tr;
    });

    $('#sm-table').on('click', '.sm-del', function(){ $(this).closest('tr').remove(); sm_recalc(); });

    // ---------- Serials Modal keyboard navigation ----------
    // Serial -> Enter -> Description1 -> Enter -> Description2 -> Enter -> new row's Serial
    $('#sm-table').on('keydown', '.sm-serial, .sm-desc1, .sm-desc2', function(e){
      if (e.key !== 'Enter') return;
      e.preventDefault();
      const $tr = $(this).closest('tr');

      if ($(this).hasClass('sm-serial')) {
        $tr.find('.sm-desc1').trigger('focus').select();
      } else if ($(this).hasClass('sm-desc1')) {
        $tr.find('.sm-desc2').trigger('focus').select();
      } else if ($(this).hasClass('sm-desc2')) {
        const $next = $tr.next('tr');
        if ($next.length) {
          $next.find('.sm-serial').trigger('focus').select();
        } else {
          $('#sm-add-row').trigger('click');
          $('#sm-table tbody tr').last().find('.sm-serial').trigger('focus');
        }
      }
    });

    $('#table_products').on('click', '.btn-add-serials', function(){
      const $row = $(this).closest('tr');
      const serialTracked = ($row.find('.is-serial-tracked').val() === '1');
      const { total } = rowQtyBonus($row);
      if (!serialTracked) { Swal.fire('This product is not serial-tracked','','info'); return; }
      if (!total) { Swal.fire('Enter Qty/Bonus first','','info'); return; }

      SM_ctx.$row = $row;
      SM_ctx.required = total;
      $('#sm-required').text(total); $('#sm-entered').text(0); $('#sm-remaining').text(total);
      $('#sm-table tbody').empty();

      const existing = JSON.parse($row.find('.serials-json').val() || '[]');
      if (existing.length){
        existing.forEach(s => {
          $('#sm-add-row').trigger('click');
          const $last = $('#sm-table tbody tr').last();
          $last.find('.sm-serial').val(s.serial_no);
          $last.find('.sm-desc1').val(s.description1 || '');
          $last.find('.sm-desc2').val(s.description2 || '');
        });
        sm_recalc();
      }
      $('#serialsModal').modal('show');
    });

    $('#sm-save').on('click', function(){
      const uniq = new Set();
      const rows = [];
      let dup = null;
      $('#sm-table tbody tr').each(function(){
        const code = ($(this).find('.sm-serial').val()||'').trim();
        if (!code) return;
        const d1 = ($(this).find('.sm-desc1').val()||'').trim();
        const d2 = ($(this).find('.sm-desc2').val()||'').trim();
        if (uniq.has(code)) dup = code;
        uniq.add(code);
        rows.push({serial_no: code, description1: d1, description2: d2});
      });
      if (dup){
        Swal.fire('Duplicate serial: '+dup,'','error'); return;
      }
      SM_ctx.$row.find('.serials-json').val(JSON.stringify(rows));
      setExtrasIcons(SM_ctx.$row);
      $('#serialsModal').modal('hide');
    });

    $('#table_products').on('click', '.btn-add-serials', function(){
      const $row = $(this).closest('tr');
      gateSerialButton($row);
    });

    function afterAddRow($row){
      setExtrasIcons($row);
      gateSerialButton($row);
    }

    let __QP = {
      $row: null,
      metaLoaded: false,
      nextProdId: 1,          // ← NEW: filled by qpLoadMeta
    };

    function qpLoadMeta(){
      if (__QP.metaLoaded) return $.Deferred().resolve().promise();

      return $.get(QP_META_URL).then(resp => {
        const $c1 = $('#qp_company');
        const $c2 = $('#qp_category');

        $c1.empty().append(new Option('Select…', ''));
        (resp.companies || []).forEach(x => $c1.append(new Option(x.text, x.id)));

        $c2.empty().append(new Option('Select…', ''));
        (resp.categories || []).forEach(x => $c2.append(new Option(x.text, x.id)));

        // ── store next_prod_id for auto-code generation ──────────────────────
        if (resp.next_prod_id) {
          __QP.nextProdId = resp.next_prod_id;
        }

        __QP.metaLoaded = true;
      });
    }

    function qpOpen({ $row, code = '', name = '' }) {
      __QP.$row = $row;

      // Reset fields (code set AFTER meta loads so we have nextProdId)
      $('#qp_name').val(name || '');
      $('#qp_purchase').val('');
      $('#qp_retail').val('');
      $('#qp_wholesale').val('');
      $('#qp_ppp').val('1');
      $('#qp_code').val(code || '');   // temp — overwritten below if needed

      qpLoadMeta().always(() => {
        // If no code was given (triggered from name-search), auto-generate one
        if (!code) {
          $('#qp_code').val('a-' + __QP.nextProdId);
        }

        $('#quickProductModal').one('shown.bs.modal', function () {
          $('#qp_name').focus().select();
        }).modal('show');
      });
    }

    $('#qp_save').on('click', function(){
      const payload = {
        code: $('#qp_code').val().trim(),
        name: $('#qp_name').val().trim(),
        company_id: $('#qp_company').val(),
        category_id: $('#qp_category').val(),
        purchase: $('#qp_purchase').val(),
        retail: $('#qp_retail').val(),
        wholesale: $('#qp_wholesale').val(),
        pieces_per_pack: $('#qp_ppp').val(),
      };

      if (!payload.code) { Swal.fire('Code required','','warning'); $('#qp_code').focus(); return; }
      if (!payload.name) { Swal.fire('Name required','','warning'); $('#qp_name').focus(); return; }

      $.ajax({
        url: QP_SAVE_URL,
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(payload),
        success: function(resp){
          const $row = __QP.$row;
          if (!$row || !$row.length) { $('#quickProductModal').modal('hide'); return; }

          const $sel = $row.find('.name-select');
          $sel.append(new Option(resp.name, resp.id, true, true)).trigger('change');

          applyPickedProduct($row, resp);

          $('#quickProductModal').modal('hide');
          setTimeout(() => $row.find('.qty-input').focus(), 50);
        },
        error: function(xhr){
          const msg = (xhr.responseJSON && xhr.responseJSON.error) ? xhr.responseJSON.error : 'Failed to create product';
          Swal.fire('Error', msg, 'error');
        }
      });
    });

    $('#quickProductModal').on('keydown', 'input, select', function(e){
      if (e.which !== 13) return;
      e.preventDefault();

      const $fields = $('#quickProductForm')
        .find('input, select')
        .filter(':visible:not([disabled])');

      const idx = $fields.index(this);
      if (idx >= 0 && idx < $fields.length - 1){
        $fields.eq(idx + 1).focus();
      } else {
        $('#qp_save').trigger('click');
      }
    });


    // ─── Product Info Bar ───
    const INFO_BAR_URL = '{% url "purchases:product_info_bar" %}';

    const PURCHASE_HISTORY_URL = '{% url "purchases:purchase_history" %}';

    // ══════════════════════════════════════════════════════════════════════
    // PURCHASE HISTORY  (Alt+H)
    // ══════════════════════════════════════════════════════════════════════

    let __ph_code = '';
    let __ph_ppp  = 1;

    function phGetFirstOfMonth() {
      const d = new Date();
      return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-01`;
    }
    function phGetToday() {
      return new Date().toISOString().slice(0, 10);
    }

    function phFormatMoney(v) {
      const n = parseFloat(v) || 0;
      return n.toLocaleString('en-PK', {minimumFractionDigits:2, maximumFractionDigits:2});
    }

    function phLoad(code, dateFrom, dateTo) {
      if (!code) return;
      __ph_code = code;
      $('#ph-loading').show();
      $('#ph-tbody').html(
        '<tr><td colspan="9" class="text-center text-muted py-3">' +
        '<i class="fas fa-spinner fa-spin me-1"></i>Loading…</td></tr>'
      );
      $('#ph-tfoot').hide();

      $.get(PURCHASE_HISTORY_URL, { code, date_from: dateFrom, date_to: dateTo })
        .done(function (resp) {
          const rows  = resp.rows || [];
          const label = resp.product_name ? `— ${resp.code} | ${resp.product_name}` : '';
          $('#ph-product-label').text(label);
          $('#ph-row-count').text(rows.length);
          $('#ph-loading').hide();

          if (!rows.length) {
            $('#ph-tbody').html(
              '<tr><td colspan="9" class="text-center text-muted py-4">' +
              '<i class="fas fa-inbox fa-2x d-block mb-2 opacity-25"></i>' +
              'No purchases found in this period</td></tr>'
            );
            return;
          }

          let html = '';
          let sumQty=0, sumBonus=0, sumTotal=0;

          rows.forEach((r, i) => {
            const qty   = parseFloat(r.qty   || 0);
            const bonus = parseFloat(r.bonus || 0);
            const total = parseFloat(r.total || 0);
            const price = parseFloat(r.price || 0);
            const disc  = parseFloat(r.disc  || 0);
            sumQty   += qty;
            sumBonus += bonus;
            sumTotal += total;

            // PPP display
            const dispQty = PPP_MODE && __ph_ppp > 1
              ? toDisplayQty(qty, __ph_ppp)
              : (qty % 1 === 0 ? qty : qty.toFixed(3));

            html += `
              <tr>
                <td class="px-3 text-muted">${i+1}</td>
                <td>${r.date}</td>
                <td>
                  <a href="{% url 'purchases:purchases_list' %}?search=${r.bill_no}"
                     target="_blank" class="text-primary fw-semibold">#${r.bill_no}</a>
                </td>
                <td>${r.vendor || '—'}</td>
                <td class="text-end fw-semibold">${dispQty}</td>
                <td class="text-end text-success">${bonus > 0 ? bonus : '—'}</td>
                <td class="text-end">${phFormatMoney(price)}</td>
                <td class="text-end text-danger">${disc > 0 ? phFormatMoney(disc) : '—'}</td>
                <td class="text-end fw-bold text-primary">${phFormatMoney(total)}</td>
              </tr>`;
          });

          $('#ph-tbody').html(html);

          // Summary row
          const dispSumQty = PPP_MODE && __ph_ppp > 1
            ? toDisplayQty(sumQty, __ph_ppp) : sumQty.toFixed(2);
          $('#ph-sum-qty').text(dispSumQty);
          $('#ph-sum-bonus').text(sumBonus > 0 ? sumBonus : '—');
          $('#ph-sum-total').text(phFormatMoney(sumTotal));
          $('#ph-tfoot').show();
        })
        .fail(function () {
          $('#ph-loading').hide();
          $('#ph-tbody').html(
            '<tr><td colspan="9" class="text-center text-danger py-3">' +
            '<i class="fas fa-exclamation-triangle me-1"></i>Failed to load</td></tr>'
          );
        });
    }

    function phOpen(code, ppp) {
      __ph_code = code || '';
      __ph_ppp  = parseInt(ppp || 1) || 1;
      if (!__ph_code) return;

      // Default dates: first of month → today
      $('#ph-date-from').val(phGetFirstOfMonth());
      $('#ph-date-to').val(phGetToday());

      $('#purchaseHistoryModal').modal('show');
      phLoad(__ph_code, phGetFirstOfMonth(), phGetToday());
    }

    // Search button
    $('#ph-search-btn').on('click', function () {
      phLoad(__ph_code, $('#ph-date-from').val(), $('#ph-date-to').val());
    });

    // Enter inside date inputs also triggers search
    $('#ph-date-from, #ph-date-to').on('keydown', function (e) {
      if (e.which === 13) $('#ph-search-btn').trigger('click');
    });

    // ── Alt+H shortcut ────────────────────────────────────────────────────
    $(document).on('keydown', function (e) {
      if (!e.altKey || e.key !== 'h' && e.key !== 'H') return;
      e.preventDefault();

      // Find the active/focused row
      let $row = $(document.activeElement).closest('tr');
      if (!$row.length || $row.hasClass('template-row')) {
        $row = $('#table_products tbody tr:not(.template-row)').last();
      }
      if (!$row.length) return;

      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      if (!code) { Swal.fire('Select a product row first', '', 'info'); return; }

      const ppp = parseInt($row.data('ppp') || 1) || 1;
      phOpen(code, ppp);
    });



    const __infoBarCache = {};
    let __infoBarLastCode = '';

    function updateInfoBar(productCode) {
      if (!productCode) {
        $('#product-info-bar').css('display', 'none');
        __infoBarLastCode = '';
        return;
      }
      if (productCode === __infoBarLastCode) return;
      __infoBarLastCode = productCode;

      if (__infoBarCache[productCode]) {
        renderInfoBar(__infoBarCache[productCode]);
        return;
      }
      $.get(INFO_BAR_URL, { code: productCode }, function(resp) {
        if (resp && resp.stock !== undefined) {
          __infoBarCache[productCode] = resp;
          renderInfoBar(resp);
        }
      });
    }

    function renderInfoBar(d) {
      $('#pib-stock').text(parseFloat(d.stock || 0).toFixed(0));
      $('#pib-ppp').text(d.ppp || 0);
      // Last purchase in display currency
      const lastBase = parseFloat(d.last_purchase || 0);
      const lastDisp = CURR.rate > 0 ? lastBase / CURR.rate : lastBase;
      $('#pib-last-purchase').text(lastDisp.toFixed(2));
      $('#product-info-bar').css('display', '');
    }

    function recalcInfoBarTotals() {
          let totalItems = 0;
          let totalQty = 0;
          $('#table_products tbody tr:not(.template-row)').each(function() {
            const $r = $(this);
            let code = ($r.find('.code-input').val() || '').trim();
            if (!code) {
              const selCode = $r.find('.name-select').data('product_code');
              if (selCode) code = String(selCode);
            }
            if (!code) return;

            totalItems++;
            const q = parseFloat($r.find('.qty-input').val()) || 0;
            const b = parseFloat($r.find('.bonus-input').val()) || 0;
            totalQty += (q + b);
          });
          $('#pib-total-items').text(totalItems);
          $('#pib-total-qty').text(totalQty % 1 === 0 ? totalQty : totalQty.toFixed(2));

          if (totalItems > 0) {
            $('#product-info-bar').css('display', '');
          }
        }

    $('#table_products').on('focusin', 'input, select', function() {
      const $row = $(this).closest('tr');
      if ($row.hasClass('template-row')) return;
      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      if (code) updateInfoBar(code);
    });

});
</script>
{% endblock %}